Webfont and width of the text issue inside jQuery plugin

Question

I'm working on my new site and I want to add tooltip plugin with webfont, but the tooltop is in wrong position, but it work when I don't use webfont.

the code for the plugin look like this:

$.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');
        });
    });
};

It rely on innerWidth that is executed before the font is loaded I think. Generated code look like this:

<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>

and 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;
}

I think it's related to this question: Cross-browser webfonts loaded event.

Is there a way to fix it? Maybe using different CSS.

Answer 1

The problem is not with the webfont, the problem with how this tooltip plugin position each tooltip.

Each tooltip is initialized on absolute position on document ready, "top" and "left" are already, but the tooltips are hidden, so on mouse hover the tooltip is just shown.

Solution: do calculation of "top" and "left" of the tooltip on "mouse hover" event, NOT on document ready.

Easier solution: I've tried/seen many tooltip plugins. IMO, the best performing plugin, easy-to-use, cross-browser, well-designed, pure-CSS(no images needed).. is a plugin called "tipsy". I use custom font sizes and custom webfonts with this tipsy tooltip, and works perfectly!

Off-topic: add border="0" to all your site images, in firefox, images have visible border