The Spry tooltip widget exposes additional information when a user hovers over a particular element on the page. The additional content disappears when the user stops hovering. You can also set tooltips to stay open for longer periods of time so that users can interact with content inside the tooltip.

A Tooltip widget consists of the following three elements:

• The tooltip container. This is the element that contains the message or content that you want to display when the user activates the tooltip.

• The page element(s) that activates the tooltip.

• The constructor script. This is JavaScript that tells Spry to create the tooltip functionality.

The following is example code for a Tooltip widget:

<p>In this sentence<a href="#" id="trigger">these three words</a> are the trigger element... </p>
<div id="firstFixed">This is the tooltip</div>
<script type="text/javascript">
	var static_tooltip = new Spry.Widget.Tooltip('firstFixed', '#trigger', {closeOnTooltipLeave: true, hideDelay: 1000});
</script>

In the above example, the a tag with the id "trigger" is the element that triggers the tooltip display. When a user hovers over this tag, the tooltip appears in the browser.

The div tag with the id "firstFixed" surrounds the tooltip content, but the content only appears when the user hovers over the trigger content.

In the tooltip constructor, the var defines the widget name (in this case “static_tooltip”). The required values in the Spry.Widget.Tooltip method are the ID of the tooltip content (“firstFixed”) and the CSS selector of the trigger element. The CSS selector can be a class, an HTML tag, an ID, or a combination of these. In this example, our selector is “#trigger”.

You can also add other options to the constructor, for example options that define how long to display the tooltip, and where to place it.

In our example, we used an a tag for our trigger element, and a div tag to contain the content of our tooltip. The actual HTML code, however, can be anything. What matters is the tooltip’s ID, the trigger element’s CSS selector, and the correspondence of those values to the values you place in the widget constructor.

You should keep the following points in mind when working with the Tooltip widget:

• Any open tooltip will close before the next one opens.

• Tooltips persist while users hover over the trigger area.

• There are no limitations as to what kinds of tags you can use for triggers and for tooltip content. (Block level elements are always advisable, however, to avoid possible cross-browser rendering problems.)

• By default, the tooltip appears 20 pixels down and to the right of the cursor. You can use the offsetX and offsetY options to set a custom appearance point.

• You must place both trigger and tooltip HTML code before the constructor script.

• Currently there is no way to have a tooltip open when a page loads in a browser.

The tooltip widget requires very little CSS. Spry uses JavaScript to show, hide, and position the tooltip. You can achieve any other styling for the tooltip with standard CSS techniques, as your page requires. The only rule contained in the default CSS file is a workaround for Internet Explorer 6 problems so that the tooltip appears above form elements or Flash objects.