-1

I'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :

I've just tried this simple code :

<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>

--> div works fine

<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>

--> select doesn't work

<span id="my-tooltip">
test with span
</span>

--> span doesn't work

Could you please help me ? here is my page

thank you all !

Community
  • 1
  • 1
wytaa
  • 1

1 Answers1

0

From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:

jQuery('#my-tooltip')

You'll see that only one node is returned, this is the one that has your initialised tooltip.

To fix this you'll need to change your nodes to use classes, i.e.

<div class="my-tooltip">
    This div has a tooltip with HTML when you hover over it!
</div>

<select class="my-tooltip" name="select">
    <option value="value1">Valeur 1</option>
    <option value="value2" selected>Valeur 2</option>
    <option value="value3">Valeur 3</option>
</select>

<span class="my-tooltip">test with span</span>

In your tooltipster setup, you'll want to have the following selector and options enabled:

jQuery('.my-tooltip').tooltipster({
    // Original setup
    content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')

    // Additional options
    multiple: true,
    contentAsHTML: true
});

I hope this helps! :)

zesda
  • 418
  • 6
  • 18
  • @wytaa Excellent, good to hear! Feel free to accept my answer (the tick underneath the up/down arrows) - this will help with the answer for any other visitors asking the same question :) – zesda Jun 06 '16 at 10:53