Specify a Dynamic Tooltip Using jQuery Tools

Question

I am trying to use jQuery Tools to setup some tooltips dynamically, but I am having great trouble.

By default when you setup a tooltip in it's most basic form using jQuery Tools it will take the next element after the tooltip trigger as the actual tooltip.

$("#someElement").tooltip();

In a current application I am working on I have a link that I need to load a tooltip that is not the next element.

Using jQuery Tools you can do this by using:

$("#someElement").tooltip({tip: '#tooltipElement'});

This is great, but I need to be able to set the tip dynamically, which I don't seem to be able to do.

On the application I have links setup that look like this:

<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-1">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-2">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-3">Quick Preview</a>...

The tooltips are then at the bottom of the page like this:

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

So what I then tried doing to make this work was:

$(".tooltip-preview").tooltip({tip: $(this).attr("data-tooltip-id")});

I have a feeling this doesn't work because $(this) isn't used as the $(".tooltip-preview") object. If this is the case how do I get that to work?

What happens instead is the next element on each link is used as the tooltip.

Rob Andren · Accepted Answer · 2012-08-16 18:40:20Z

This worked for me:

$(".tooltip-preview").each(function(){
    $(this).tooltip({tip: $(this).attr("data-tooltip-id")});            
});

This answer assumes that in this block:

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

You meant this (incrementing id values is the key point here. Note that I also differentiate the random content):

<div id="tooltip-1">Some random content here! (1)</div>
<div id="tooltip-2">Some random content here! (2)</div>
<div id="tooltip-3">Some random content here! (3)</div>...

I was able to duplicate the problem and at first I tried:

$(".tooltip-preview").tooltip({tip: $(".tooltip-preview").attr("data-tooltip-id")});

That gets you closer but it makes all three of the tooltips "Some random content here! (1)" because that selector only finds the first element with the attribute "data-tooltip-id".

So you have to iterate through the elements as indicated above.

Collectives™ on Stack Overflow

Specify a Dynamic Tooltip Using jQuery Tools

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related