As with other Spry widgets, you might want to either generate the code with Spry Data or populate the content with Spry Data. A common tooltip scenario is a variation of the master/detail pattern. For example, say you have a table that is the master region, and another table (the detail region) that updates in response to users clicking rows of the master. With the tooltip, you can make the detail region the tooltip, and make the row click the trigger. For a working sample, see the Using Spry Data with the Tooltip Widget page on Adobe Labs.

The key to working with Spry Data and the Tooltip widget, much like other widgets, is that due to the asynchronous nature of Spry Data, you have to control the regeneration of the widget when the data updates. The simplest way to do this is with observers. Observers regenerate the Tooltip widget every time the main region is updated. You use the onPostUpdate notification for this. The basic code is as follows:

<div spry:region="ds1" id="mainRegion">
 <!-- Set the onMouseOver event to trigger the detail region update. The class name 'trigger' is used in the constructor. -->
 <div spry:repeat="ds1" onmouseover="ds1.setCurrentRow('{ds_RowID}');" class="trigger">{firstname} {lastname}<br /></div>
</div>
<!-- The tooltip container. The id is used in the constructor. -->
<p spry:detailregion="ds1" id="tooltip">Phone:{phone}<br />
 UserName:{username}<br />
 ID:{@id}</p>
 <!-- The Observer script. Add an observer to run the tooltip constructor after the detail region is loaded. 
'mainRegion' is the ID of the main region. onPostUpdate tells the function() to run after the new data is loaded. 
The actual widget constructor is the function in the observer. -->
<script type="text/javascript">
 Spry.Data.Region.addObserver('mainRegion',{onPostUpdate:function(){var tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}});
</script>

Following is a breakdown of the code:

• mainRegion is the ID of the Spry region we are listening to for data updates.

• The trigger class is used to attach one tooltip to multiple elements.

• The ID tooltip is the detail region.

• The onmouseover event sets the current row in the data set, which updates the tooltip, depending on the selection.