具体见: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 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>
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>
![](https://i-blog.csdnimg.cn/blog_migrate/b3841426f4cbbbab842a698dde71cd49.jpeg)
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>
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>
Copyright © 2007. Adobe Systems Incorporated. All rights reserved.