Question

I need help reviewing a basic tooltip using jQuery ui position. The jQuery tooltip gets the title attribute off a link and creates a tooltip on hover of that link. How can this code be improved and or made more efficient? I wanted to post this here in the hopes it helps others. I sure spent enough time on something that I thought would be simple.

Here is my code (Would love for people to post alternate versions):

http://jsfiddle.net/pN4Bw/

$(".tip a").hover(
    function() {
    var tipText = $(this).attr("title");
    $("<div class='toolTip' style='display:none;'>" + tipText + " </div>").insertAfter(this);
$('.toolTip').position({
    my: "left top",
    at: "right top",
    of: this,
    collision: "flip"
});
//Is there a better way to select the tooltip?
$(this).next().fadeIn(500); //should I fade it in this way?            
}, function() {
//Should I use a better selector?
$(this).next().fadeOut('slow', function() {
    $(this).remove();
    });
});​

• Should I even be using ui position or some other technique? I’m open to better solutions.
• Do you know of a better non plugin jQuery tooltip?
• I refuse to use a plugin for something like this.
• I heart StackOverflow
• jQuery UI .position used above – http://jqueryui.com/demos/position/

Ideas, thoughts, comments? Thanks all, I hope this helps others as well!

Answer 1

Use of jQueryUI position() method would be dependent on if you are already using jQueryUI in page or not. Would be a waste to load it if all you need is position.

Not a lot of extra effort to calculate position using the link offset with offet() method and an adustment for width using width() method.

If already loading jQueryUI… position() is a very convenient utility method and saves doing the calcs yourself

EDIT: use of UI position “flip” option however does require considerably more effort to code yourself