tooltipster jQuery plugin not working if not div - tooltipster

Question

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 !

Answer 1

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! :)