JQuery Tools tooltip instructions

Last Update:2018-12-08 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body> <form id = "myform" action = "#">
<H3> Registration Form <Div id = "inputs">
<! -- Username -->
<Label for = "username"> Username </label>
<Input id = "username" title = "Must be 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 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> -- first option -- </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 when 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>
</Html>

CSSCopy codeThe Code is 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 is not needed, and the display looks disgusting.
Key code:Copy codeThe Code is 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. The same effect is true if this line is missing.
// Custom opacity setting
Opacity: 0.7
});

Use
Here is the possible initialization of the simplest tooltip:

$ ("# Myform: input"). tooltip (); Configuration

Attribute	Default Value	Description
CancelDefault	`true`	Since version 1.1.0.When the tool prompts that the content is captured fromTitleTrigger element attribute this attribute cancels the default behavior browser prompt for execution. This is done by simply removing thisTitleAttribute from trigger. You can still retrieve/modify the title value by calling jQuery'sData ('title ')Method: trigger.
Effect	`'toggle'`	Specifies how to display and hide the prompt. There are two built-in effects that can be used as values: Toggle. A simple display/hide effect. This is the default Fade. A simple fade-in/fade-out effect Another slide effect is not included in the tool itself. You can build your own.
Delay	`30`	Specifies how long the tooltip will remain visible after the mouse leaf trigger. This is required. If tootip has interactive content and users, it will take time to go to the tootip area. By setting 0, the tool prompts that the mouse will disappear and the trigger element will be removed.
Events	`Object`	A configuration object that specifies that the tool will be displayed and hidden when prompted. You can specify elements of different types of events. Here, the default value is this property: events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" } JavaScript You can read more about this event management chapter.
Layout	`'<div/>'`	Since 1.2.0HTML layout is the generated tooltip. The HTML layout can be very complex as you wish. You can, for example, add a nestedSpanAn element acts as a placeholder for an arrow.
Offset	`[0, 0]`	The fine-tuned tool prompts you to specify the locationLocation Property. You can see more information about the positioning details.
Opacity	`1`	Transparent tooltip. For example, 0 means invisible, 1 means no transparency (completely visible), and 0.4 means that the 40% tooltip is displayed. If your tool prompts you to use a CSS background image, you can set the transparency of the image if it has been saved in the PNG24 format. Remember, Internet IE 6 does not support native transparent PNG.
Position	`'top center'`	Specifies the location of the tooltip. You can see more information about the positioning details. Old format:['Top', 'center'] It is obsolete and will be removed in the future.
Predelay	`0`	Since version 1.1.0.Delay (in milliseconds) before the tooltip is displayed. There is no delay by default.
Relative	`false`	Since 1.1.1.By default, the tooltip position now determines the method relative to the document (by using this relative. By enabling this property rights tool, the prompt location is a relatively determined parent element.
Tip		A jQuery selector is a single tooltip element. For example# Mytip. This option is only valid if you want to manually define a tool to prompt multiple triggers for simultaneous elements. Because 1.2.5TitleThe property can still be used as a tooltip.
TipClass	`'tooltip'`	Since 1.2.0.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 parameter.

Event	Trigger event
Onbeforeshow	The tool prompt is displayed. The second parameter is the location where the tooltip is to be used. This is the value of an object.{Top: integer, left: integer}
OnShow	The tool prompt is displayed.
OnBeforeHide	The tooltip is hidden.
OnHide	When this tooltip is hidden.

The following example is an onShow callback function, which fades out the trigger element and is displayed as a tooltip:Copy codeThe Code is as follows: $ ("label"). tooltip ({
// Change trigger opacity slowly to 0.8
OnShow: function (){
This. getTrigger (). fadeTo ("slow", 0.8 );
}
});

Event Management
JQuery tooltip gives you full control over the display or hiding of tooltip. You can specify elements of different types of events. You can control this behavior. This event configuration variable has the following default values:Copy codeThe Code is 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
}

Script api
First, make sure you understand yourself and the jQuery tool script.

All API methods are listed below:

Method	Return Value	Description/Example
Show ()	`api`	A tooltip is displayed.
Hide ()	`api`	Hide the tooltip.
IsShown (fully)	`Boolean`	ReturnRealIf this tooltip is visible. Since 1.2.0, you can also use a Boolean parameter to ensure that the function returnsRealOnly when the tooltip is fully visible (in its final position and opacity ).
GetTip ()	`jQuery`	Returns tooltip as a jQuery object.
GetTrigger ()	`jQuery`	The returned element is triggered as a jQuery object.
GetConf ()	`Object`	Return to the tooltip configuration.

Built-in effect: fade
The built-in effect "gradually" has its own set of configuration options as follows:

Attribute	Default Value	Description
FadeInSpeed	400	The speed is displayed in milliseconds.
Fadeoutspeed	200	When the fade-out speed of the tooltip is hidden, the unit is milliseconds.

The following is an example of a Custom Event: http://jquerytools.org/demos/tooltip/custom-effect.htm
Tab: Portal
Tab (slide): Portal
Tooltip: Portal
Overlay: Portal
Dateinput: Portal
I did framework2.0 at Ctrip, but I studied framework4.0. What I thought at that time was T.T. It's all about TMD's old technology and heap code.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More