javascript - jQuery 插件中文本问题的 Webfont 和宽度

Question

我正在研究 my new site我想用 webfont 添加 tooltip 插件，但是 tooltop 的位置错误，但是当我不使用 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, '&nbsp;')).
            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。

Answer 1

问题不在于 webfont，问题在于这个工具提示插件如何定位每个工具提示。

每个工具提示都在文档准备好的绝对位置上初始化，“top”和“left”已经存在，但是工​​具提示是隐藏的，所以在鼠标悬停时工具提示只显示。

解决方案:在“鼠标悬停”事件时计算工具提示的“顶部”和“左侧”，而不是在文档就绪时计算。

更简单的解决方案:我已经尝试/看到了许多工具提示插件。 IMO，性能最佳的插件，易于使用，跨浏览器，精心设计，纯 CSS(不需要图像).. 是一个名为“tipsy”的插件。我将自定义字体大小和自定义网络字体与这个微不足道的工具提示一起使用，并且效果很好!

题外话:将border="0"添加到您所有的站点图片，在firefox中，图片有可见的边框