jQuery Tipsy Tooltip Plugin Customization

Question

I am using the jQuery plugin tipsy to activate tooltips when specific elements are hovered over. Currently, the tooltip appears in the middle of the element that it was triggered by, but I would like to customize the plugin so that the tooltip appears over the corresponding headline. Take a look at the example I've linked to below. The tooltip is triggered when the whole #everything div is hovered over, which is correct, but I would like the tooltip to appear above the headline.

Example: http://jsfiddle.net/JqFwP/2/

Please let me know if you need more information or further explanation of what I am trying to accomplish.

Thank you.

Answer 1

I am not familiar with tipsy plugin, but how about chaining a mouseenter event to #everything?

JAVASCRIPT:

$("#everything").tipsy({
    gravity: 's'
}).mouseenter(function(){
    var top=$(this).find('h2').offset().top - 35,
        left=$(this).find('h2').offset().left - 10;
    $('.tipsy').css({
        'top': top + 'px',
        'left': left + 'px'
    });
});

DEMO (Single Headline): http://jsfiddle.net/dirtyd77/JqFwP/16/

DEMO (Multiple Headlines): http://jsfiddle.net/dirtyd77/JqFwP/17/

IMHO, I recommend you use jQueryUI's tooltip instead. I feel it would be more beneficial. Just a thought! Let me know if you have any questions!