Tooltip

Tooltip is similar to the title="" attribute in regular HTML, but is much more flexible. You can control the display timing, and specify arbitrary HTML for the tooltip text.

Example

Longanimity

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Tooltip Demo</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

        <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.Tooltip");

     </script>

</head>

<body class="tundra">

        <span id="wordOfTheDay">longanimity</span>

        <div dojoType="dijit.Tooltip" 

                   connectId="wordOfTheDay" 

                   label="a disposition to bear injuries patiently : forbearance"> 

                   </div>

    <div id="wordOfTheDay">Longanimity</div>

</body></html>

dijit.Tooltip Internal widget that holds the actual tooltip markup, which occurs once per page. Called by Tooltip widgets which are just containers to hold the markup
Attributes
connectId	String	Id of domNode to attach the tooltip to. (When user hovers over specified dom node, the tooltip will appear.) New in 1.0 You an also specify a comma-separated list of id to attach to multiple nodes. When using the programmatic interface, you can pass an array of Strings.
label	String	Text to display in the tooltip. Specified as innerHTML when creating the widget from markup.
showDelay	Integer 400	Number of milliseconds to wait after hovering over/focusing on the object, before the tooltip is displayed.

Accessibility - updated for 1.0

General Issues

Tooltips are displayed when the associated item receives focus or a mouseover event. Be careful when assigning tooltips to arbitrary elements such as spans of text which may not receive keyboard focus because users of assistive technology or keyboard only users will not benefit from the tooltip. If the tooltip information is important, make certain that the item which triggers display of the tooltip can receive focus via the keyboard. This can be accomplished by adding a tabindex="0" attribute onto the trigger element to put it into the tab order of the page.