jQuery Tools - Tooltip issue

Question

Have a tooltip issue here. Hope somebody could help tweak the code a little bit. I'm using the jQuery Tools for implementing a tooltip. I need tooltips to open from separate div where I can use any html code. So far I have just one tooltip to open:

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<script>
  $(document).ready(function() {
        $("#download_now").tooltip({
           offset: [5, 0],
           effect: 'slide'
        }).dynamic({ bottom: { direction: 'down', bounce: true } });

});
</script>

And it works fine except I need more tooltips added.

Could anybody help modifying the script so more tooltips could be added by their id?

Here is the JSFiddle with one tooltip (working)

Here is the JSFiddle with more tooltips (not working)

I'm sure there should be an easy fix. I'm just not a javascript specialist.

Thanks!

Answer 1

Ok i got it. I apologize, I thought you were using jquery-ui tooltip (which provide - according to me - better widgets than the lib you are using).

By reading the documentation i found that :

After this the element next to the trigger is being used as the tooltip

meaning that your tooltip contents (with html as you specified) need to be placed after the element on which you want a tootip, like this :

Lorem ipsum 
<a id="download_now1" class="need_tooltip">
    <strong>dolor sit amet</strong>
</a>
<div class="tooltip">
    <p><strong>Some sample text</strong> with html within...</p>
</div>

Have a look in this jsFiddle.

If you can't put your tooltips contents directly after your elements i would suggest you to use jquery-ui which is more flexible to define tooltips contents.

---

EDIT to provide a jquery-ui version

jquery-ui tooltips basically closes when element looses focus, so you can't hover the tooltip (to click on a link inside for example). But there is a workaround to prevent tooltip from closing for such case :). Thus i think this new jsFiddle is filling your requirements.