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

"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.
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Changing the style of the tooltip.
Is it possible to load the tooltip below the link instead of to the right of the link?
How can the color and theme of the tooltip be customized. Simple addition of class="myTheme" does not seem to work.
connectId="wordOfTheDay"
label="a disposition to bear injuries patiently : forbearance">
</div>
Loading the tooltip remotely..
A custom tooltip widget that is able to load the tooltip contents from a remote url can be found here:
http://nileshbansal.blogspot.com/2007/09/enhanced-ajaxified-tooltips-usi...
http://queens.db.toronto.edu/~nilesh/linux/dojo0.9-extend-tooltip/
dojo.css
In the Tooltip example code, the URL seems incorrect:
http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css ( file not found ).
This works though:
http://o.aolcdn.com/dojo/0.9.0/dojo/resources/dojo.css
I found this while curling these files.
Pages are being updated with this
... should be done by Nov. 19, as well as being updated for 1.0. Thank you!
Example: Arbitrary HTML for a Tooltip
Here is an example fragment using some arbitrary HTML for a tooltip:
Note: The < br/> in the tooltip has a space inserted so that it will show up in the code listing above. The space needs to be removed in actual code.
-=> Gregg <=-
multiple connectId in Dojo 1.0
The documentation is out of date. connectId is now a list of ids and not a single id starting Dojo 1.0. This means, connectId=["nodeId1", "nodeId2"] should be valid now.
Thank you
That is now noted.