McArthur GFX

Alright, taking a look at the Mootools docs, and playing around, I've quickly learnt how to throw an image into a Tooltip with Mootools.  It's far easier, and far cleaner than what I was doing with version 1.1.  The first way still works, and the validator tells me its valid, but it feels dirty.

A little background: the tooltip is built from the title and rel (or href if rel is empty) attributes of the element.

Putting <img> in the rel property

window.addEvent('domready',function() {

	var t = new Tips('.tip');

});

<a class="tip" href="http://mootools.net/" rel="<img src=mootools_white.jpg />" title="Mootools.net">Mootools</a>

This was my original, dirty way.  It should still work.  Make sure to escape the left and right brackets inside the rel property, or you've got invalid XHTML. So if that looks like your bag of goodies, take it.  For those who like feeling good inside, here's a newer, cleaner way of doing things.

Using Element.store to store an image

The Mootools Tips class use Element.store and Element.retrieve for the tool-tips title and text, so that means we can override the defaults.  It just requires a little more scripting, but I think that's perfectly fine.

The benefit here is that you can make a new DOM Element of an image, and store the image into the tip:text field of the Element. Take a peek:

window.addEvent('domready',function() {

	var t = new Tips('.tip');

								

	$$('.tip').each(function(tip){

		var imgSrc = tip.retrieve('tip:text');

		var imgAlt = tip.retrieve('tip:title');

		tip.store('tip:text', new Element('img',{'src':imgSrc,'alt':imgAlt}));

	});

});

This way, we can store the filename of the image in the rel property, and then construct the image with Javascript.  Feels a whole lot cleaner than keeping an escaped img tag inside a property.

<a class="tip" href="#" rel="mootools_white.jpg" title="Mootools.net">Mootools</a>

There it is.  Let me know if I goofed in my write-up.  And subscribe if you felt this was useful.