私は新しいサイトに取り組んでおり、webfont を使用してツールチップ プラグインを追加したいのですが、ツールトップの位置が間違っていますが、webfont を使用しない場合に機能します。
プラグインのコードは次のようになります。
$.fn.tooltip = function(options) {
var settings = $.extend({}, {
arrowSize: 5
}, options);
return this.each(function() {
var self = $(this).attr('title', '');
var wrapper = self.wrap('<div/>').parent().addClass('tooltip-wrapper').
css('position', 'relative');
var tooltip = $('<div/>').appendTo(wrapper);
var box = $('<div/>').addClass('box').appendTo(tooltip);
var arrow = $('<div/>').addClass('arrow').appendTo(tooltip).css({
'border-left-width': settings.arrowSize,
'border-right-width': settings.arrowSize,
'border-top-width': settings.arrowSize
});
var width = box.html(self.attr('rel').replace(/ /g, ' ')).
innerWidth();
tooltip.css({
top: -self.height(),
left: -(width-self.width())/2
}).addClass('tooltip');
self.mouseenter(function() {
tooltip.stop().fadeIn('fast');
}).mouseleave(function() {
tooltip.stop().fadeOut('fast');
});
});
};
フォントがロードされる前に実行されることに依存しinnerWidth
ていると思います。生成されたコードは次のようになります。
<div class="tooltip-wrapper" style="position: relative;">
<a href="https://twitter.com/jcubic" title="" rel="Twitter">
<img src="img/profile-twitter.png">
</a>
<div class="tooltip" style="top: -32px; left: -25.5px; display: none; opacity: 1;">
<div class="box">Caption</div>
<div class="arrow" style="border-left-width: 5px; border-right-width: 5px; border-top-width: 5px;"></div>
</div>
</div>
とCSS
.tooltip {
display: none;
position: absolute;
z-index: 100;
}
.tooltip-wrapper .box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #b72100;
padding: 5px 10px;
display: inline-block;
text-align: center;
}
.tooltip-wrapper .arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #b72100;
margin: auto;
}
この質問に関連していると思います: Cross-browser webfonts loaded event。
それを修正する方法はありますか?別のCSSを使用している可能性があります。