-
Book Overview & Buying
-
Table Of Contents
YUI 2.8: Learning the Library
By :
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...
Change the font size
Change margin width
Change background colour