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!

rd3n · Accepted Answer · 2013-11-06 16:09:38Z

3

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.

edited Nov 6, 2013 at 16:09

answered Oct 18, 2013 at 22:35

rd3n

4,7001 gold badge37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

axidos Over a year ago

I know that the elements have unique DOM element identifiers. I just don't know how to modify the script to achieve my goal. I know how to use multiple tooltips called from the title but the idea here is to have content called from div where I can add any content I need (pictures, text, links, etc.) The titles don't work for this unfortunately.

axidos Over a year ago

Also, it's not a jquery-ui tooltip. This tooltip is based on different library - jQuery Tools - jquerytools.org/demos/tooltip/any-html.html

axidos Over a year ago

This is almost what was looking for but I wanted to have all divs sitting separately under the html with triggers so it could be easy to maintain. The interface I'm trying to build eventually will be very complex. I would also prefer the jquery-ui tooltip but couldn't find the right demo that would be close to this idea. I would appreciate if you could show how to solve it with jquery-ui. If the trigger could be clickable that would also be helpful. and thanks for all your help!

rd3n Over a year ago

I provided a jquery-ui version to fit your needs

axidos Over a year ago

That's exactly it. Thanks a lot for your help!

Collectives™ on Stack Overflow

jQuery Tools - Tooltip issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related