Getting custom tooltips with JQuery

Question

I'm looking for a JQuery code sample or library for displaying tooltips when the cursor hovers over an element. Specifically, what I want to do is display my own <div> element on hover, not an automatically-constructed or loaded-from-the-host-element tooltip. I've looked at a couple JQuery tooltip plugins and they all seem to be unable to do this, but are very complex in other ways. This seems like something that should be only a couple of lines of JS/JQuery to do, yet I also haven't been able to find any working tutorials.

An ideal solution would also deal with tooltips near borders, have a 'sticky tooltip' option, have the option to load the HTML to be displayed as the tooltip using AJAX (as opposed to inline in the HTML/JS), and deal well with large numbers of tooltips (only showing one at a time of course).

Answer 1

Well, I can't offer you an entire solution but getting a div to appear as a tooltip is pretty simple:

(function($){

    var $div = $('<div/>').css({
        position: 'absolute',
        background: 'white',
        border: '1px solid black',
        padding: '10px',
        zIndex: 999,
        display: 'none'
    }).appendTo('body');

    $('a.tooltip')
        .mousemove(function(e){
            $div.css({
                top: e.pageY + 10 + 'px',
                left: e.pageX + 10 + 'px'
            });
        })
        .hover(function(){
            $div.show().html('Text to display...');
        }, function(){
            $div.hide();
        });

})(jQuery);

An example -> http://jsbin.com/emoso