Html
Copy Code code as follows:
<! DOCTYPE html>
<title>jquery Tools Standalone Demo</title>
<!--include the Tools-->
<script src= "Http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" ></script>
<link rel= "stylesheet" type= "Text/css"
Href= "./tooltip-generic.css"/>
<style>
#myform {
border:1px outset #ccc;
Background: #fff repeat-x;
padding:20px;
margin:20px Auto;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform H3 {
Text-align:center;
margin:0 0 10px 0;
}
* http://www.quirksmode.org/css/forms.html * *
#inputs label, #inputs input, #inputs textarea, #inputs select {
Display:block;
width:150px;
Float:left;
margin-bottom:20px;
}
#inputs Label {
Text-align:right;
width:75px;
padding-right:20px;
}
#inputs BR {
Clear:left;
}
</style>
<body><form id= "MyForm" action= "#" >
<div id= "Inputs" >
<!--username-->
<label for= "username" >Username</label>
<input id= "username" title= "must is at least 8 characters." />
<br/>
<!--password-->
<label for= "Password" >Password</label>
<input id= "password" type= password "title=" make it hard to guess. "/>
<br/>
<!--email-->
<label for= "Email" >Email</label>
<input id= "Email" title= "We won ' t send you to any marketing material."/>
<br/>
<!--message-->
<label for= "Body" >Message</label>
<textarea id= "Body" title= "What's On Your mind?" ></textarea>
<br/>
<!--message-->
<label for= "where" >select one</label>
<select id= "where" title= "Select one of these options" >
<option>--the--</option>
<option>--second Option--</option>
<option>--third Option--</option>
</select>
<br/>
</div>
<!--email-->
<label>
I accept the terms and conditions
<input type= "checkbox" id= "Check" title= "Required to proceed"/>
</label>
<p>
<button type= "button" title= "this button won ' t do anything" >
Proceed
</button>
</p>
</form>
<!--javascript coding-->
<script>
Execute your scripts the DOM is ready. This is a good habit
$ (function () {
Select all desired input fields and attach tooltips to them
$ ("#myform: Input"). ToolTip ({
Place tooltip on the right edge
Position: "Center Right",
A little tweaking of the position
Offset: [-2, 10],
Use the built-in fadein/fadeout effect
Effect: "Fade",
Custom Opacity Setting
opacity:0.7
});
});
</script>
</body>
Css
Copy Code code as follows:
* Simple css-based tooltip * *
. tooltip {
Background-color: #000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
Display:none;
Color: #fff;
Text-align:left;
font-size:12px;
/* Outline radius for Mozilla/firefox only * *
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
CSS can not be required, so the appearance of a disgusting point.
Key code:
Copy Code code as follows:
Select all desired input fields and attach tooltips to them
$ ("#myform: Input"). ToolTip ({
Place tooltip on the right edge
Position: "Center Right",
A little tweaking of the position
Offset: [-2, 10],
Use the built-in fadein/fadeout effect
Effect: "Fade",
Tipclass: ' tooltip ',//Save value: ToolTip, less this line effect is the same
Custom Opacity Setting
opacity:0.7
});
Use
Here is the initialization of the simplest tooltip that may exist:
$ ("#myform: Input"). tooltip (); configuration
| Property |
Default Value |
Description |
| CancelDefault |
true |
since the 1.1.0 edition. When the tooltip content is crawled 标题 触发器元素的属性 这个属性取消默认工具提示执行的行为 浏览器。 这是通过简单的移除 这个 标题 属性从触发器。 你仍然可以检索/修改标题值通过调用 jQuery的 数据('title') 方法为触发。 from the |
| Effect |
'toggle' |
The toggle fade slide effect is not included in the tool itself. You can |
| Delay |
30 |
Specifies how long the ToolTip remains visible after the mouse leaf trigger. This is required if tootip already interacts with the content and the user will need time to go to the Tootip area. By setting the 0 ToolTip also disappears the mouse away from the trigger element. |
| Events |
Object |
A configuration object that specifies when ToolTips are displayed and hidden. You can specify different events of different types of elements. Here are the default values for this property:
events{
Span class= "NX" >def Input "Focus,blur" widget "focus Mouseover,blur mouseout" tooltip< Span class= "o": "mouseover,mouseout"
javascript
You can read more about this section of this Incident management chapter. |
| Layout |
'<div/>' |
since 1.2.0 The HTML layout is the generated ToolTip. Can be very complex HTML layout as you wish. You can, for example, add a nested 跨度 元素作为箭的占位符。 |
| Offset |
[0, 0] |
Finely adjust ToolTip designation location this位置 属性。 看到这个 定位细节 更多的信息。 |
| Opacity |
1 |
A transparent ToolTip. For example, 0 means invisible, 1 means no transparency (fully visible) and 0.4 means 40% tooltip display. If your tooltip uses a CSS background image, you can set the transparency image if it has been saved in the PNG24 graphic format. Remember, Internet IE 6 does not support native transparent PNG. |
| position |
' top center ' |
< Span id= "outfox_jtr_trans_node-124" class= "Outfox_jtr_trans_node" is discarded and will be removed in the future. |
| Predelay |
0 |
since the 1.1.0 edition. a delay (in milliseconds) is specified before the ToolTip is displayed. There is no delay by default. |
| Relative |
false |
since 1.1.1. By default, the ToolTip location now determines the method relative to the document (by using this relative). The location of the property tooltip by enabling it is a relatively determined parent element |
| Tip |
|
A jquery selector is an element of a single tooltip. For example# mytip 。 该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。 因为1.2.5 标题 属性仍然可以被用作工具提示内容。 |
| Tipclass |
'tooltip' |
since 1.2.0. the element of the tooltip generated by the CSS class name. |
Event
Make sure you have read about the event jquery tool. All event listeners receive this event object as the first argument.
| Events |
Triggering Events |
| onbeforeshow |
{top:integer, left:integer} &NBSP; |
| onshow | The
|
| onbeforehide |
in ToolTips are hidden |
| onhide |
|
The following example is a OnShow callback function that fades the trigger element when the ToolTip is displayed:
Copy Code code as follows:
$ ("label"). ToolTip ({
Change trigger opacity slowly to 0.8
Onshow:function () {
This.gettrigger (). Fadeto ("slow", 0.8);
}
});
Event Management
jquery tooltips allow you to fully control when ToolTips are displayed or hidden. You can specify different events of different types of elements. You can control this behavior. The event configuration variable, which has the following default values:
Copy Code code as follows:
Events: {
def: "Mouseenter,mouseleave",//default Show/hide events for an element
Input: "Focus,blur",//for all input elements
Widget: "Focus Mouseenter,blur MouseLeave",//Select, CheckBox, Radio, button
ToolTip: "Mouseenter,mouseleave"//The ToolTip element
}
Scripting API
First make sure you have understood yourself with the jquery tool script.
The following are all the API methods:
| Method |
return value |
Description/Example |
| Show () |
api |
Displays tooltips. |
| hide () |
Code>api |
hide the tooltip. |
| isshown (fully) |
Boolean |
Span id= "outfox_jtr_trans_node-262" class= "Outfox_jtr_trans_node" to return to real Real |
| Gettip () |
jQuery |
Returns tooltip as a JQuery object. |
| Gettrigger () |
jQuery |
Returns the element as a trigger for a jquery object. |
| Getconf () |
对象 |
Returns the ToolTip configuration. |
Built-in effect: Fade
The built-in effect "fade" has its own set of configuration options as follows:
| Property |
Default Value |
Description |
| Fadeinspeed |
400 |
The light in time displays ToolTips, in milliseconds. |
| Fadeoutspeed |
200 |
When the tooltip fades out the speed is hidden, in milliseconds. |
Here is an example of a custom event: http://jquerytools.org/demos/tooltip/custom-effect.htm
Tab: Portal
tab (slide): Portal
ToolTip: Transmission Door
Overlay: Transmission Door
Dateinput: Transmission Door
In Ctrip doing framework2.0, research is framework4.0, at that time is how to think of t.t. It's all TMD technology and heap code.
