Spry Tooltip Widget

This page highlights the capabilities of the Spry Tooltip Widget. By default the widget will need to receive the id of the hidden element to be displayed when the mouse will move over the trigger elements. The trigger elements are sent in the widget constructor as CSS selectors. To see a sample of using Spry Data and the Tooltip widget, check this page.

The widget supports a limited list of CSS selectors. You can use class names, element ids and element HTML tags or any combination of these.

The tooltip may contain anything from simple text to complex HTML:

Mouse over me for simple tooltip or Mouse over me for complex tooltip

I'm a simple tooltip

Egypt is the fifteenth most populous country in the world. The vast majority of its 78.8 million population (2006) [1] live near the banks of the Nile River (about 40,000 km² or 15,450 sq miles) where the only arable agricultural land is found.The regularity and richness of the annual Nile River flood, coupled with semi-isolation provided by deserts to the east and west, allowed for the development of one of the world's great civilizations. Pyramids of Egypt A unified kingdom arose circa 3200 B.C., and a series of dynasties ruled in Egypt for the next three millennia. The last native dynasty fell to the Persians in 341 B.C., who in turn were replaced by the Greeks, Romans, and Byzantines.

It was the Arabs who introduced Islam and the Arabic language in the 7th century and who ruled for the next six centuries. A local military caste, the Mamluks took control about 1250 and Pyramids of Egypt continued to govern after the conquest of Egypt by the Ottoman Turks in 1517. Following the completion of the Suez Canal in 1869, Egypt became an important world transportation hub, but also fell heavily into debt.

Using CSS Selectors to determine the trigger

You can use CSS selectors to specify a single trigger or multiple triggers for the same tooltip. In this case, the tooltip looks for 2 page element with 'selectMe' class applied to them.

<script type="text/javascript">
 var multiple_tooltip = new Spry.Widget.Tooltip('tooltipMultipleSample', '#multipleSample .selectMe');
 var multiple_tooltip2 = new Spry.Widget.Tooltip('tooltipMultipleSample2', '.multipleSample2 .selectMe');
 </script>
I'm the first trigger
I'm the second trigger
I'm the third trigger
Adobe Photoshop CS2 Adobe® Photoshop® CS2 software, the professional image-editing standard and leader of the Photoshop digital imaging line, delivers more of what you crave. Groundbreaking creative tools help you achieve extraordinary results. Unprecedented adaptability lets you custom-fit Photoshop to the way you work. And with more efficient editing, processing, and file handling, there's no slowing you down.
Adobe Dreamweaver CS3 With Adobe® Dreamweaver® CS3, web developers go from start to finish, creating and maintaining basic web sites to advanced applications that support best practices and the latest technologies.
Lions

Delays

By default, the tooltip shows up immediately. You can set delays to slow down the showing and hiding of the tooltip. These are set as an option in the constructor.

<script type="text/javascript">
 var showDelay_tooltip = new Spry.Widget.Tooltip('showDelay', '#showDelayTrigger', {showDelay: 2000});
 var hideDelay_tooltip = new Spry.Widget.Tooltip('hideDelay', '#hideDelayTrigger', {hideDelay: 1000});
</script>
Keep the mouse over for 1 second or the tooltip can close with a delay.
And you'll see the tooltip.
I will display longer.

Class on trigger

In this sample, a CSS class is set on the trigger to alert the user that something happens on the element. This is set as an option in the constructor.

<script type="text/javascript">
 var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, hoverClass:"enlarge"})
 </script>
Pyramids of Giza

Tooltip positioning

By default, the tooltip is positioned 20px lower and to the right of the cursor. Setting the offsetX and offsetY allows you to set a new position for the tooltip. Pixels are measured from the cursor, not the original tooltip origin. The position indicates the top, left position of the tooltip element.

Positioned up and to the left | Positioned to the left and same height as cursor

<script type="text/javascript">
    var positioned_tooltip = new Spry.Widget.Tooltip('option', '#option', {showDelay: 500, offsetX: -30, offsetY: -30});
    var positioned2_tooltip = new Spry.Widget.Tooltip('optionValue', '#optionValue', {showDelay: 500, offsetX: "-200px", offsetY: "0px"});
</script>
This is above the cursor and to the left.
This is left of the cursor and at the same height.

Tooltip animation

The tooltip widget contains 2 built in effects for opening the tooltip: Fade and Blind. Set these as an option in the constructor. The values of the effects are hard coded and cannot be changed.

<script type="text/javascript">
 var fadeTooltip = new Spry.Widget.Tooltip('fadeMe', '#fadeTrigger', {useEffect: 'Fade'});
 var blindTooltip = new Spry.Widget.Tooltip('blindMe', '#blindTrigger', {useEffect: 'Blind'});
</script>

Fade and Blind

Egypt is the fifteenth most populous country in the world. The vast majority of its 78.8 million population (2006) [1] live near the banks of the Nile River (about 40,000 km² or 15,450 sq miles) where the only arable agricultural land is found.The regularity and richness of the annual Nile River flood, coupled with semi-isolation provided by deserts to the east and west, allowed for the development of one of the world's great civilizations. Pyramids of Egypt A unified kingdom arose circa 3200 B.C., and a series of dynasties ruled in Egypt for the next three millennia. The last native dynasty fell to the Persians in 341 B.C., who in turn were replaced by the Greeks, Romans, and Byzantines.

It was the Arabs who introduced Islam and the Arabic language in the 7th century and who ruled for the next six centuries. A local military caste, the Mamluks took control about 1250 and Pyramids of Egypt continued to govern after the conquest of Egypt by the Ottoman Turks in 1517. Following the completion of the Suez Canal in 1869, Egypt became an important world transportation hub, but also fell heavily into debt.

Egypt is the fifteenth most populous country in the world. The vast majority of its 78.8 million population (2006) [1] live near the banks of the Nile River (about 40,000 km² or 15,450 sq miles) where the only arable agricultural land is found.The regularity and richness of the annual Nile River flood, coupled with semi-isolation provided by deserts to the east and west, allowed for the development of one of the world's great civilizations. Pyramids of Egypt A unified kingdom arose circa 3200 B.C., and a series of dynasties ruled in Egypt for the next three millennia. The last native dynasty fell to the Persians in 341 B.C., who in turn were replaced by the Greeks, Romans, and Byzantines.

It was the Arabs who introduced Islam and the Arabic language in the 7th century and who ruled for the next six centuries. A local military caste, the Mamluks took control about 1250 and Pyramids of Egypt continued to govern after the conquest of Egypt by the Ottoman Turks in 1517. Following the completion of the Suez Canal in 1869, Egypt became an important world transportation hub, but also fell heavily into debt.

Tooltips with interactive content

Sometimes, tooltips contain rich information such as links or forms. In these cases, the tooltip needs to remain so the user can interact with it. Setting the 'closeOnTooltipLeave' will leave the tooltip showing until the mouse leaves the tooltip element.

<script type="text/javascript">
 var surveyTooltip = new Spry.Widget.Tooltip('survey', '#surveyTrigger', {hideDelay: 1500, closeOnTooltipLeave: true, offsetX: "10px", offsetY:"-10px"});
</script>
Mouse over me to complete this form

Tooltip following the cursor

Another option for the tooltip is to have it follow the cursor while the cursor is in the trigger area. Setting the followMouse option will activate this.

<script type="text/javascript">
 var followTrigger = new Spry.Widget.Tooltip('following', '#followMe', {followMouse: true});
</script>
The tooltip follows the mouse while the cursor is within the element, in this case noted by the border.
The tooltip follows the mouse...

Copyright © 2007. Adobe Systems Incorporated. All rights reserved.