web字體和jQuery插件

我工作my new site，我想補充工具提示插件與web字體，但tooltop是在錯誤的位置上，但是當我不使用web字體它的工作中的文本問題的寬度。web字體和jQuery插件

該插件的代碼如下所示：

$.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。

來源

2013-08-28 jcubic

的問題是不是與web字體，與如何提示插件位置的每個提示問題。

每個工具提示上的絕對位置初始化文件上的準備，「頂」和「左」了，但工具提示是隱藏的，所以鼠標懸停工具提示只是顯示。

解決方案：計算「鼠標懸停」事件上的工具提示的「頂部」和「左側」，而不是文檔準備就緒。

更簡單的解決方案：我試過/看過很多工具提示插件。 IMO，表現最好的插件，易於使用，跨瀏覽器的，精心設計，純CSS（不需要圖片）..是一個名爲「tipsy」插件。我使用自定義字體大小和自定義webfonts與這個醉意的工具提示，並完美的作品！

題外話：添加border="0"到所有網站中的圖片，在Firefox中，圖像有明顯的邊界

來源

2013-09-05 21:19:34 evilReiko

爲什麼那麼提示的位置，而web字體是正確的？ – jcubic

@jcubic它看起來是正確的，但實際上它並不是完全居中。 – evilReiko

web字體和jQuery插件

回答

相關問題