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.

Dom · Accepted Answer · 2013-02-28 21:31:42Z

4

+50

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!

edited Feb 28, 2013 at 21:31

answered Feb 28, 2013 at 21:24

Dom

40.7k12 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

conbask Over a year ago

I ended up selecting this answer because it is more concise and works well for my implementation.

Jeremythuff · Accepted Answer · 2013-03-05 03:54:53Z

0

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/

answered Mar 5, 2013 at 3:54

Jeremythuff

1,5682 gold badges14 silver badges35 bronze badges

Comments

vorillaz · Accepted Answer · 2013-03-06 00:35:41Z

0

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/

edited Mar 6, 2013 at 0:35

answered Mar 5, 2013 at 23:06

vorillaz

6,3062 gold badges32 silver badges46 bronze badges

2 Comments

conbask Over a year ago

In your example, when a user hovers over a headline then down to body text (within the same div), the tooltip disappears.

vorillaz Over a year ago

Your comment was straight to the point. Hovering the headline triggers the tooltip and the makes the mouseenter and mouseleave events stop working. I have added an extra parameter to tipsy init in order to get my hands on tipsy manually as it is suggested in the documentation, trigger: 'manual' was the key to fix the bug. Check my revision on the fiddle above.

Collectives™ on Stack Overflow

jQuery Tipsy Tooltip Plugin Customization

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related