JAVASCRIPT EXAMPLES Auto Tooltip for Photo Info
In this example, an instance of Uize.Widget.AutoTooltip is wired to a set of photo thumbnails, providing decorated tooltips that show additional information about the photos when you mouse over them. The tooltip HTML is generated by a JavaScript template that is tucked into the instance's root node. The array of thumbnail nodes to wire up with tooltips is obtained using the Uize.Dom.Basics.find static method, and is specified by setting the instance's nodes state property.
The data displayed in the decorated tooltip is extracted from the title attribute of the thumbnail nodes. This allows the data to be present in the HTML, providing several benefits. For one, the data provides relevance hints to search engines that index the page. This a classic example of "unobtrusive JavaScript". The page still provides the informational value if JavaScript is disabled, if the JavaScript breaks, or if it just takes long for the JavaScript to load and wire up the behavior.
The graceful degradation means that in the worst case the user will see a regular browser tooltip with the information for the photos. To demonstrate this, click on the "UNWIRE AUTO TOOLTIPS" button to unwire the widget. With the widget unwired, mousing over the thumbnails gives you the experience without the auto tooltip behavior - just the regular browser tooltips. To go back to decorated tooltips, click the "WIRE AUTO TOOLTIPS" button.