ptg 386 Chapter 16 With the spry tooltip widget, you can add screen information for ele- ments on a web page. When you hover over an element, a tooltip with information about the element, a title or short description, appears for a short period of time or until you stop hovering over the element. A spry tooltip consists of a container, page element, and JavaScript. When you insert a spry tooltip, a container appears with a blue tab on top and a placeholder sentence inside. You can add formatting for a tooltip by using standard CSS styles. When you display the tooltip, by default, it appears 20 pixels down and to the right of the cursor. Creating a Spry Tooltip Create a Spry Tooltip Open the Web page you want to insert a spry tooltip. Select the full tag element you want to add a tooltip. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry Tooltip. A container with a placeholder sentence for the tooltip appears. The container displays a blue tab with the Spry Tooltip name. Select the placeholder text, and then enter the tooltip text that you want. Select the spry tooltip widget, and then select from the following options in the Properties panel: ◆ Name. Specifies a name for the tooltip container. ◆ Trigger. Identifies the elements that triggers the tooltip. ◆ Follow Mouse. Causes the tooltip to follow the mouse. ◆ Hide on Mouse Out. Keeps the tooltip open as long as the mouse is hovering over the tooltip (even if the mouse leaves the trigger). Helpful for selecting links in a tooltip. 5 4 3 2 1 1 3 2 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 387 ◆ Horizontal or Vertical Offset. Specifies the tooltips horizontal or vertical position in relation to the mouse. The offset value is in pixels. ◆ Show Delay. Specify the delay in milliseconds before the tooltip appears after the tooltip has been triggered. ◆ Hide Delay. Specify the delay in milliseconds before the tooltip disappears after the tooltip has been triggered. ◆ Effect. Specify the type of effect you want when the tooltip appears. The Blind option acts like a window blind to display and hide the tooltip. The Fade option fades the tooltip in and out. Edit a Spry Tooltip Open the Web page with the spry tooltip. Hover over or place the insertion point in the tooltip content on the page. Click the tooltip’s blue tab to select it. Modify the text in the tooltip or change the tooltip options in the Properties panel. 4 3 2 1 5 1 4 3 Spry tooltip 4 From the Library of Wow! eBook ptg 388 Chapter 16 Displaying Spry Data Sets Display the Spry HTML Data Set Open the Web page you want to use. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry Data Set. Click the Select Data Type list arrow, and then click HTML. Enter a name for the spry data set or use the default one, ds1. Click the Detect list arrow, and then select the type of HTML elements in your data source that you want to detect. Click Browse, navigate to and select the HTML data file, and then click OK. ◆ To use a sam ple feed on your test server, click the Design Time Feed link. In the Data Selection window, click one of the yellow arrows with the element for your data container. You can also select an ID from the Data Containers list arrow. If you want to specify CSS data selectors, select the Advanced data selection check box, and then enter a data selector, such as .product, to filter the data. Click Next to continue. 9 8 7 6 5 4 3 2 1 A spry data set allows you to provide interactive data to visitors on your site. The data on the page changes based on the visitors’ selections. For example, you can select an option in one part of a page, and then display other content somewhere else on a page without requiring a full-page refresh. To use data sets to create a dynamic page, you need to take a few steps. First, you identify one or more data sets (HTML or XML source files) that contain the data you want to use. Next, you insert one or more spry data objects to display the data on a page. When a visitor opens the page in a browser, the data set loads like a normal table containing columns and rows. 3 4 5 6 98 7 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 389 Select the column you want to use in the Data Preview window. If you want to validate the data to a specific type, click the Typ e list arrow, and then select a data type. If you want to sort the data as it loads, click the Sort Column list arrow, select a sort option, click the Direction list arrow, select the direction you want, and then select or clear the sort check boxes. Select the Filter Out Duplicate Rows check box to eliminate any duplicate columns. Select the Disable Data Caching check box to load data directly from the server, otherwise it caches it on your local computer. Select the Auto Refresh Data check box, and then enter an interval value in milliseconds to refresh the data from the server. Click Next to continue. Select a display option for the data, and then click Set Up to specify how you want to layout the data. ◆ Insert Table. Creates a dynamic Spry Table. ◆ Insert Master/Detail Layout. Creates a master region on the left that updates information in the detailed region on the right. ◆ Insert Stacked Containers. Creates a stacked repeating container structure for data. ◆ Insert Stacked Containers with Spotlight Area. Creates a stacked repeating container structure (2 columns) with a spotlight area (for a picture). ◆ Do Not Insert HTML. Creates a data set without inserting a data layout. Click Done. Continue Next Page 18 17 16 15 14 13 12 11 10 10 11 12 13 1614 15 17 18 From the Library of Wow! eBook ptg 390 Chapter 16 Continued from Previous Page Display the Spry XML Data Set Open the Web page you want to use. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry XML Data Set. TIMESAVER If you don’t have an XML data set, you can get a sample at www.adobe.com/go/ learn_dw_spryframework. Click the Select Data Type list arrow, and then click HTML. Enter a name for the spry data set or use the default one, ds1. Click Browse, navigate to and select the XML data file, and then click OK. ◆ To use a sam ple feed on your test server, click the Design Time Feed link. Click Get Schema to populate the Row Elements panel. Select the element that contains the data you want to display. The element typically is a repeating node with one or more subfields. The XPath text box shows the data found in the data set. A preview of the data set appears in the Data Preview window. Click Next to continue. Select the column you want to use in the Data Preview window. If you want to validate the data to be a specific type, click the Typ e list arrow, and then select a data type. 10 9 8 7 6 5 4 3 2 1 3 4 5 9 10 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 391 If you want to sort the data as it loads, click the Sort Column list arrow, select a sort option, click the Direction list arrow, and then select the direction you want. Select the Filter Out Duplicate Rows check box to eliminate any duplicate columns. Select the Disable Data Caching check box to load data directly from the server, otherwise it caches it on your local computer. Select the Auto Refresh Data check box, and then enter an interval value in milliseconds to refresh the XML data from the server. Click Next to continue. Select a display option for the data, and then click Set Up to specify how you want to layout the data. Click Done. View the Spry XML Data Set Open the Web page with the spry XML data set you want to view. Click the Window menu, and then click Bindings to display the Bindings panel. The spry XML data set appears, displaying the structure of the data. 2 1 17 16 15 14 13 12 11 2 Data structure 16 17 From the Library of Wow! eBook . updates information in the detailed region on the right. ◆ Insert Stacked Containers. Creates a stacked repeating container structure for data. ◆ Insert Stacked Containers with Spotlight Area data. Click Next to continue. 9 8 7 6 5 4 3 2 1 A spry data set allows you to provide interactive data to visitors on your site. The data on the page changes based on the visitors’ selections. For example,. the visitors’ selections. For example, you can select an option in one part of a page, and then display other content somewhere else on a page without requiring a full-page refresh. To use data