dijit.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 (rich-text) HTML for the tooltip contents.

Note that if you want your tooltip to contain a form or something that the user clicks on / focuses on, you should use the dijit.TooltipDialog <dijit/TooltipDialog>_ instead.

Here’s a tooltip created programatically:

<script>
   dojo.require("dijit.Tooltip");
   dojo.addOnLoad(function(){
      new dijit.Tooltip({
          connectId: ["wordOfTheDay2"],
          label: "a <i>disposition</i> to bear injuries patiently : <b>forbearance</b>"
      });
   });
</script>
<span id="wordOfTheDay2">Longanimity</span>

‘’Note that connectId is an array, since it can contain multiple nodes to connect to.’‘

And here’s the same tooltip created from markup:

<script>
   dojo.require("dijit.Tooltip");
</script>
<div dojoType="dijit.Tooltip" connectId="wordOfTheDay">
    a <i>disposition</i> to bear injuries patiently : <b>forbearance</b>
 </div>
 <span id="wordOfTheDay">Longanimity</span>

Tooltip Positioning

By default, dijit tries to find a place to display the tooltip to the left or the right of the target element. You can control the search path for positions via a global setting like:

dijit.Tooltip.defaultPosition = [“above”, “below”];

Accessibility

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.

Known Issues

When using Firefox 2 with JAWS 9, the tooltip text is spoken twice. This has been fixed in Firefox 3.