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.