0

我正在开发我的新网站，我想添加带有 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, '&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。

4

1 回答 1

1

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

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

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

更简单的解决方案：我已经尝试/看到了许多工具提示插件。IMO，性能最好的插件，易于使用，跨浏览器，精心设计，纯 CSS（无需图像）.. 是一个名为“ tipsy ”的插件。我使用自定义字体大小和自定义 webfonts 和这个提示提示，并且效果很好！

题外话：添加border="0"到您的所有站点图像，在 Firefox 中，图像具有可见边框

于 2013-09-05T21:19:34.630 回答