The Tooltip control is one of the easiest components of the library to use; with just a couple of lines of code, you can have a custom Tooltip:
(new YAHOO.widget.Tooltip(Dom.generateId(),{ context:Dom.getElementsByClassName("thumb","img") }));
This simple code will create Tooltips for all our images. The context
configuration attribute accepts an element or an array of elements either by their IDs or actual references to the DOM elements. Here, we use Dom's .getElementsByClassName()
to locate all the thumbnail images and use the array returned for the context
attribute.
Tooltip will read the title
attribute from the elements it monitors and use it for the text
so we don't really need to concern ourselves with that; however, while the title
attribute can only be plain text, Tooltip will properly process any HTML it finds. Moreover, we are quite at liberty to change the standard style to whatever we want, such as:
.yui-skin-sam .yui-tt .bd { background-color:#B3D4FF; color:#ffffff...