Spry

Insert the Tooltip widget

  1. Locate the SpryTooltip.js file and add it to your web site. You can find the SpryTooltip.js file in the widgets/tooltip directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

    For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryTooltip.js file to it. The SpryTooltip.js file contains all of the information necessary for making the Tooltip widget interactive.

  2. Locate the SpryTooltip.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
  3. Open the web page to add the Tooltip widget to and link the SpryTooltip.js file to the page by inserting the following script tag in the page’s head tag: 
    <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>

    Make sure that the file path to the SpryTooltip.js file is correct. This path varies depending on where you’ve placed the file in your web site.

  4. Link the SpryTooltip.css file to your web page by inserting the following link tag in the page’s head tag: 
    <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />

    Make sure that the file path to the SpryTooltip.css file is correct. This path varies depending on where you’ve placed the file in your web site.

  5. In the body of the page, add some sample text and create a container tag for the trigger. Assign the tag that surrounds the trigger a unique ID. Our example uses id="trigger": 
    <p>This will be the <span id="trigger">tooltip trigger</span>.</p>
  6. Add tags for the tooltip container and populate the tags with tooltip content. You’ll also need to assign the container tag a unique ID, as follows: 
    <p>This will be the <span id="trigger">tooltip trigger</span>.</p>
<div id="container">This is the tooltip content</div>
  7. Add the constructor script for the tooltip. Remember, the constructor script must come after the HTML code for the tooltip: 
    <p>This will be the <span id="trigger">tooltip trigger</span>.</p>
<div id="container">This is the tooltip content</div>
<script type="text/javascript">
var tooltip_one = new Spry.Widget.Tooltip("container","#trigger");
</script>

    The required arguments for the tooltip constructor are the ID of the tooltip container (“container” in our example), and the CSS selector for the tooltip trigger (“#trigger”). In the example, we’ve placed the # sign in front of the ID to transform the ID into a CSS selector. The selector can specify an element ID, a class name, an HTML tag name, or a more complex selector that’s a combination of these.

  8. Save the page.
    You might want to turn your triggers into links so that people recognize them as active areas. If you want to do this, you can change the <span id="trigger"> tag to <a href="#" id="trigger">. (Don’t forget to change the closing tag as well.) Or if you don’t want to create a null link, you can define a CSS class (that sets a different background color for example), and apply it to the tooltip to differentiate it from surrounding text.