Tooltips from AJAX, DOM nodes or inline attributes contents

It just so happened that I got a request to extend the current Tips.js script in mootools, so as to have it load contents from an AJAX source, or from the innerHTML of a DOM node. I had a go at it and thought I’d share.

If there’s enough interest on this topic, I’ll make it a plugin, with a nice bundle. Here’s a sneak preview: http://www.e-magine.ro/playground/tipsx3/

NEW: discuss TipsX3 on the forums. Get support from others using it.

They work just like the classic Tips (fully compatible), but I have added the possibility to grab contents from a DOM node, by formatting the title attribute this way: title="DOM:someElementsID".

This way, the tooltip gets the contents it would normally get from the title attribute from $('someElementsID').innerHTML (same syntax as the classic tooltips: "tooltip title::tooltip body").

The cool thing is that it can load contents from an AJAX source, complete with HTML code, images, etc. You just have to format your title attribute this way: title="AJAX:http://www.example.com/path/to/ajax_file.php".

The response text will be used as tooltip contents (same syntax as above). Either absolute or relative paths are ok. A nifty little animation is shown while the tooltip is being loaded and an error message is displayed if there’s a problem.

Additionally, when initializing the tooltips for the first time, you have three more options available, besides those already offered by Tips.js:

loadingText - text to display as a title while loading an AJAX tooltip.
errTitle, errText - text to display when there's a problem with the AJAX request.

You can leave these blank and default values will be used, but I’ve included them for localization sake (I18N strikes back).

For the rest of options and functionality, you may want to have a glance at the original Tips.js Docs.

This can be used as a separate plugin, replacing Tips.js, or, as an alternative, it could extend the existing Tips.js, as the only .options(), .build() and .start() are being modified.

This uses mootools 1.1 and an XHTML doctype. The example page is still a bit rough, but you get the idea. Download the files and tinker with them a bit and let me know what you think.

20 thoughts on “Tooltips from AJAX, DOM nodes or inline attributes contents

  1. Great stuff! This looks so cool! My users will be thrilled! Thanks for releasing this!

  2. This is something very usefull. Should it not be included in mootools?

  3. Fine stuff. Thanks a lot
    Is it possible to use it with pictures ?
    For Example like this:

  4. I added a bit of a tweak that makes sense for me. I can’t see why it would break anything so work it in!

    errText: ‘There was a problem retrieving the tooltip.’,
    baseHref: ” /* dlk added this */

    //this.ajax = new Ajax (el.$tmp.myText.replace(/AJAX:/i,”), {
    this.ajax = new Ajax (el.$tmp.myText.replace(/AJAX:/i, this.options.baseHref), {

    In my case the baseHref is set to an absolute url to a help folder. As All my pages can be serveral folders deep a relative link is hard to come by. I just have to put the a help page in the title (AJAX:helppage.html).

  5. Pingback: OHZE.NET » 23 Best Ajax Tooltip and Balloon

  6. it would be ok if someone would post a working link with the tooltip (only the link) because the thing doesn’t work with the title.

  7. Pingback: Webmaster 38 » Blog Archive » Very cool Tooltips at ajax scripts compound

  8. Pingback: links for 2008-01-24 « The Universe Divided

  9. Pingback: Window Growl et Packito, mootools vous aime !

  10. Awesome work!
    this is exactly what i need. love you for this.

  11. Pingback: 35+ Tooltips Scripts Ajax, JavaScript, CSS & Tutorials

  12. Pingback: 50 Adet Tooltip Uygulaması

  13. Pingback: 35+ Beautiful Tooltips Scripts With Ajax, JavaScript, CSS & Tutorials | Barkamedia

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>