Home > Developer > JavaScript
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>
CSS
Copy 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 There is anotherSlide EffectNot included in the tool itself. You canBuild 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: {JavaScript You can read |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
