Question

I know we can use .next() to find the next element of a given one. However, my situation forces me to use a SELECTOR.

I’m using jQuery tools to build some tooltips of a table, each “td” having two elements: a link and a tooltip div. My goal is to display the tooltip when the mouse hovers over the link. According to the HTML, it’s placed right after the link so I need to select “the next element”. The HTML looks like:

<tr>
  <td><a href="#" id="td1">Title</a>
  <div class="tooltip">
    <h1>Tooltip Title</h1>
    <p>A detailed descritpion</p>
  </div>
  </td> 
</tr>
<tr>
  <td><a href="#" id="td2">Title</a>
  <div class="tooltip">
    <h1>Tooltip Title</h1>
    <p>A detailed descritpion</p>
  </div>
  </td> 
</tr>
<!-- more rows -->

Unfortunately, I cannot use .next() here since the tooltip() function only accepts a selector string as an argument:

$("#mytable img").tooltip({
    tip: '.tooltip',   // <-- This must be a string, so no next()
    position: 'center right',
    offset: [0, 15],
    delay: 0
});

Is there any way to achieve this, or do I have to restruct my HTML? Many thanks.

Answer 1

You can try this

$("#mytable img").tooltip({
    tip: '#mytable img your_html_element',   // <-- This must be a string, so no next()
    position: 'center right',
    offset: [0, 15],
    delay: 0
});

Here your_html_element may be your div or span or any html element tag. you can give the name of that tag. This is same as how you are using img tag.