CODEWITHSUNDEEP
jqueryjquery-pluginstipsy
conbask
conbask

Reputation: 10061

jQuery Tipsy Tooltip Plugin Customization

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.

Upvotes: 2

Views: 9532

Answers (3)

vorillaz
vorillaz

Reputation: 6266

Manipulating plugin's code is not the best solution from my point of view. @Dom's approach seems great but doesn't support the "s" value for gravity's attribute of tipsy, which shows the tooltip in the center of the element tipsy was binded.

My first thought was to detect mouse enter for the container "div" and bind tipsy to the inner header (h2). That won't work for small headers since h2 by default is displayed as a block and takes 100% of the container element.

You have to add some CSS styling to the header which will break up your content. So I have managed to build up a solution where I wrap h2 contents with a span element in order to keep things clean and clear.

Manipulating your original HTML

<div id="everything" original-title="The whole kit and caboodle.">
     <h2>Working with really great and awesome headlines</h2>
     ....
</div>

to 

<div id="everything" original-title="The whole kit and caboodle.">
     <h2><span original-title="The whole kit and caboodle.">Working with really great and awesome headlines</span></h2>
</div>

Least but not last, I have polished my code in order to bind tipsy only once for each div container, since I wasn't able to find out how the plugin manipulates the DOM

Updated version as @585connor suggested

http://jsfiddle.net/JqFwP/22/

Update vol2: There is a another issue with my approach, if the headline is too short, the tooltip is stripped outside of the DOM. I have managed to solve this using a class in the wrapping span and some css code.

Proof of this issue http://jsfiddle.net/JqFwP/25/

My workaround http://jsfiddle.net/JqFwP/24/

Upvotes: 0

Jeremythuff
Jeremythuff

Reputation: 1548

I think I got it.

You need to change this pos variable from:

           var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

to:

           var pos = $.extend({}, this.$element.offset(), {
                width: $(this).children("h2").offsetWidth,
                height: $(this).children("h2").offsetHeight
            });

working fiddle here: http://jsfiddle.net/jeremythuff/L9BVc/8/

Upvotes: 0

Dom
Dom

Reputation: 40461

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!

Upvotes: 4

Related Questions