Tooltip
Submitted by criecke on Sun, 04/08/2007 - 00:26.
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
<!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>
"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.
Still misleading
It mentions "can be a list" instead of "must be a list" -- this cost me quite a bit of time because the examples everywhere I have seen have connectId using a string instead of a list of strings, which doesn't work.
remarks
Just started using the dojo tooltip.
- why do I need a closing < /div> instead of using a < div .... />
- is there any way to change the style ? As remarked by nileshbansal setting the class/style does not work
- RFE: be able to set the delay globally
ta
Tom
Links in Tooltip
See http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/links-tooltip...
Tooltip Information - v1.1 - dijit.Tooltip
I had many of the same questions about customized Tooltips as were listed above (from v1.1 and up). Searching around on this is tough because the functionality has changed significantly in 0.9+ I believe. Here are some things that I found out that are hopefully correct:
1. TOOLTIP POSITIONING -- There appears to be a documentation bug above, in that it doesn't mention the 'position' attribute for dijit.Tooltip. This allows one to position the Tooltip in relation to it's connected widget. In your Tooltip declaration just put "position:XXXX", where XXXX can be 'above', 'below', 'left', 'right'. Note that choosing a location that would cause the Tooltip to be off the screen may cause some display issues.
2. STYLE - [EDIT: My prior info was incorrect, editing...]
Override the css values for dijit.TooltipDialog (which is the little arrow part of the tooltip) and for dijit.TooltipContainer (the main rectangle area), if you want to style the widget itself (the tooltip "graphic"). (For styling the text inside just do the usual span/style stuff) Look in the Dialog.css file in order to see what css properties are available I suppose (background color, line width, opacity, etc). I'll post some sample css below showing some very ugly tooltip styling.
3. OLD POSTS -- Watchout for seeing pages about the -old- Tooltip stuff, which show styling that doesn't appear to be supported w/the current dijit.Tooltip (as far as I can see). It's easy to think those old attributes may still work and waste time. For example: http://trac.dojotoolkit.org/changeset/8092/dijit/trunk/tests/test_Toolti...
.soria .dijitTooltip,
.soria .dijitTooltipDialog {
opacity: 0.35;
background: orange; /* make the area on the sides of the arrow transparent */
}
.soria .dijitTooltipContainer {
background-color: yellow;
border:8px dotted #cbcbcb;
opacity: 0.45;
padding:0.45em;
}
</style>
postioning viewoport bug likely FF 3.0
Invisible tooltip depending on screen magnification in FireFox
On the demo at the top of this page if I mouseover and rest the tooltip comes up.
If I then and enlarge the screen soon the tooltip diappears and the cursor alternates between two states likely indicating a tooltip, load, fail reload
Opera is fine. DId not test the others
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
tooltip positioning
I believe that in 1.1.1 position is now an array as well. According to the source, Dojo goes through the positions in order until it finds one that can fit in the viewport.
I'm wondering if arrays for these can only be done programmatically. Only a single identifier seems to work for both connectId and position in a widget declaration, i.e. the syntax connectId=["widget1"], as was mentioned above, doesn't work.
connectId array syntax in HTML
I found that the syntax connectId='id0,id1,id2' works fine.
Tooltip position relative to the mouse
Hello!
I like this tooltip, however I feel it would be much better-looking if positioned by the mouse pointer instead of by the element.
Positioning b the element makes it look a bit awkward for instance on table cells: for instance, if you have one with a short text and a lot of white space and put the mouse over the text, the tooltip positions itself at the right of the whole cell. I know that putting a tag which wraps the text inside the cell solves this, but having the option to position the tooltip by the mouse pointer would be very handy.
Tooltip stays up
I was surprised that the tooltip text appeared below the object it was tied to, but remained even after the mouse moved away.
I am using DOJO 1.1.1
Tooltip stays up
I was surprised that the tooltip text appeared below the object it was tied to, but remained even after the mouse moved away.
I am using DOJO 1.1.1
Tooltip stays up
I was surprised that the tooltip text appeared below the object it was tied to, but remained even after the mouse moved away.
I am using DOJO 1.1.1