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.
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.