jQuery Plugin Lab

What's wrong with this plugin?

by Ryan Morris

HTML

<p>
    Some text <span class="tooltip" description="This is some more information about this word">info</span> and some <span class="tooltip" description="And other">more</span>.
</p>

CSS

.tooltipUi{
    position:relative;
    top:0;
    left:0;
    background-color:#ccc;
    color:#000;
    font-size:.8em;
}

JavaScript

;(function($) {
    
    $.fn.tooltip = function() {
        
        // initialization
        var $tooltipUi = $("<div class='tooltipUi'></div>").hide();
        
         $("body").append($tooltipUi);
        
        // @todo - handle styles
        
        this.each(function() {
            
            var $el = $(this);
            
            var description = $el.attr('description');
            
            $el.on('mouseover', function(e) {
                
                //$tooltipUi.hide();
                $tooltipUi.html(description);
                $tooltipUi.show();
                
            });
            
            $el.on('mouseout', function(e) {
               
                $tooltipUi.html("");
                $tooltipUi.hide();
                
            });
            
        });
         
        return this;
        
    };
    
})(jQuery);
 
$(".tooltip").tooltip();