Home/ Questions/Q 8394231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:00:08+00:00

I am trying to use jQuery Tools to setup some tooltips dynamically, but I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0