提醒消息框的用法(Sprytooltip.js)

具体见：http://adobe.github.io/Spry/samples/tooltip/SpryTooltipSample.html

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

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

• I'm the first trigger with the same class
• I'm the second trigger with the same class
• I'm the third trigger with the same class

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.

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>

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>

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

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.

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