Dojo: The Definitive Guide

Chapter 15. Application Widgets

This chapter systematically works through all of the general-purpose application widgets provided in Dijit. In many ways, these are some of the most exciting dijits provided by the toolkit because they're not as familiar as form elements and, unlike the enabling layout dijits, they provide tremendous interactive functionality. ProgressBar, Toolbar, Editor, and Tree are just a few of the exciting dijits that are coming up. Chances are, you'll witness some of some highest quality DHTML hacking you've ever seen in this chapter—especially as we near the end of it.

Tip

Although not explicitly called out in all cases, the widgets in this chapter are fully accessible, as are all other widgets in Dijit.

Tooltip

Tooltips are a great means of providing user assistance for the context of a particular control on the page, and although the ordinary HTML title attribute is a good start for applications circa 1990, the current era of web applications calls for a richer variation of a tooltip. The Tooltip dijit does just that, providing the ability to display arbitrary HTML markup instead of a plain old snippet of text. Although you got a preview of Tooltip with ValidationTextBox and its descendants in a previous chapter, you'll be pleased to know that you can now use Tooltip as a standalone.

Consider Example 15-1, which captures some of the key features of a Tooltip, producing the results shown in Figure 15-1.

Example 15-1. Typical Tooltip usage

One <span id="one">fish</span>, two <span id="two">fish</span>.

<div dojoType="dijit.Tooltip" connectId="one,two">
    A limbless cold-blooded vertebrate...<img src='./fish.jpeg'/>
</div>

Figure 15-1. The tooltip that appears when you mouseover either of the tags containing "fish"

Warning

Note that the syntax for passing in multiple values for connectId is inconsistent with normal JavaScript Array syntax: you provide multiple connectId s without brackets and without embedded quotes: connectId="id1,id2". It is likely that this syntax will normalize in a future release so that this isn't an exception to the rule.

As you can see from the example, you simply provide arbitrary HTML markup for Tooltip to render. Tooltip should be used for read-only content; TooltipDialog, coming up in the next section, is particularly suited for content such as input fields and buttons that requires interaction. Table 15-1 gives a complete listing of Tooltip 's features.

Table 15-1. Tooltip API

Name	Type	Comment
connectId ("")	String	A comma-separated list of values that provides the node id values for which the Tooltip should be displayed.
label ("")	String	The text to display in the Tooltip. Although the label could include arbitrary HTML markup, it's generally better form to include HTML markup inside of the enclosing tag.
showDelay (400)	Integer	How many milliseconds to wait before displaying the Tooltip to a user.