jQuery UI example - tooltip box (Tooltip)
Customizable, themable tooltip box, replace the native tooltip box.
For more details about the tooltip member, see the API documentation tooltip box member (Tooltip the Widget) .
The default function
Hover on the link, or use the tab key to cycle through the focus on each element.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Default Function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ (Document) .tooltip ();
});
</ Script>
<Style>
label {
display: inline-block;
width: 5em;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> Tooltips </a> it can be bound to any element. When you hover over the element, title property will be displayed in a small box next to the element, as native as a tool tip box. </ P>
<P> However, because it is not a native tooltip box so it can be defined styles. Theme by <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> created can also be defined accordingly tooltip box styles. </ P>
<P> tooltip box can also be used to form elements to display in each region some additional information. </ P>
<P> <label for = "age"> your age: </ label> <input id = "age" title = ". Age is only used for statistical"> </ p>
<P> hover over the corresponding area to view a tool tip box. </ P>
</ Body>
</ Html>
Custom Style
Hover on the link, or use the tab key to cycle through the focus on each element.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Custom Style </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ (Document) .tooltip ({
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$ (This) .css (position);
$ ( "<Div>")
.addClass ( "arrow")
.addClass (feedback.vertical)
.addClass (feedback.horizontal)
.appendTo (this);
}
}
});
});
</ Script>
<Style>
.ui-tooltip, .arrow: after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow: after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate (45deg);
-moz-transform: rotate (45deg);
-ms-transform: rotate (45deg);
-o-transform: rotate (45deg);
tranform: rotate (45deg);
}
.arrow.top: after {
bottom: -20px;
top: auto;
}
</ Style>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> Tooltips </a> it can be bound to any element. When you hover over the element, title property will be displayed in a small box next to the element, as native as a tool tip box. </ P>
<P> However, because it is not a native tooltip box so it can be defined styles. Theme by <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> created can also be defined accordingly tooltip box styles. </ P>
<P> tooltip box can also be used to form elements to display in each region some additional information. </ P>
<P> <label for = "age"> your age: </ label> <input id = "age" title = ". Age is only used for statistical"> </ p>
<P> hover over the corresponding area to view a tool tip box. </ P>
</ Body>
</ Html>
Custom Animation
This example demonstrates how to use the show and hide options to customize the animation, you can also use the open event to customize the animation.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Custom Animation </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Show-option") .tooltip ({
show: {
effect: "slideDown",
delay: 250
}
});
$ ( "# Hide-option") .tooltip ({
hide: {
effect: "explode",
delay: 250
}
});
$ ( "# Open-event") .tooltip ({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function (event, ui) {
ui.tooltip.animate ({top: ui.tooltip.position () top + 10.}, "fast");
}
});
});
</ Script>
</ Head>
<Body>
<P> There are a number of ways to customize tooltip box animation. </ P>
<P> You can use <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> show </a> and <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> hide </a> option. </ P>
<P> You can also use <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> open </a> event. </ P>
</ Body>
</ Html>
Custom Content
Demonstrate how to customize items and content options to combine different event delegate tooltip box to a single instance.
You may need to map tooltip box interaction, which is a future version of the function to be realized.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Custom Content </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.photo {
width: 300px;
text-align: center;
}
.photo .ui-widget-header {
margin: 1em 0;
}
.map {
width: 350px;
height: 350px;
}
.ui-tooltip {
max-width: 350px;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
items: "img, [data-geo], [title]",
content: function () {
var element = $ (this);
if (element.is ( "[data-geo]")) {
var text = element.text ();
return "<img class = 'map' alt = '" + text +
" 'Src =' http: //maps.google.com/maps/api/staticmap?" +
"Zoom = 11 & size = 350x350 & maptype = terrain & sensor = false & center =" +
text + " '>";
}
if (element.is ( "[title]")) {
return element.attr ( "title");
}
if (element.is ( "img")) {
return element.attr ( "alt");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget photo">
<Div class = "ui-widget-header ui-corner-all">
<H2> St. Stephen's Cathedral (St. Stephen's Cathedral) </ h2>
<H3> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo=""> Vienna, Austria (Vienna, Austria) </a> < / h3>
</ Div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<Img src = "../ wp-content / uploads / 2014/03 / st-stephens.jpg" alt = "St. Stephen's Cathedral (St. Stephen & apos; s Cathedral)" class = "ui-corner-all">
</a>
</ Div>
<Div class = "ui-widget photo">
<Div class = "ui-widget-header ui-corner-all">
<H2> Tower Bridge (Tower Bridge) </ h2>
<H3> <a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo=""> London (London, England) </a> < / h3>
</ Div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<Img src = "../ wp-content / uploads / 2014/03 / tower-bridge.jpg" alt = "Tower Bridge (Tower Bridge)" class = "ui-corner-all">
</a>
</ Div>
<P> All the pictures from <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a>, and are owned by <a href = "http://creativecommons.org/ licenses / by-sa / 3.0 / deed.en "title =" Creative Commons Attribution-ShareAlike 3.0 "> CC BY-SA 3.0 </a> under copyright holders. </ P>
</ Body>
</ Html>
Form
Use the button below to display the help text, or just let your mouse hover over the input box or have the input box has focus, you can display help text corresponding input box.
Define a fixed width in CSS, so that simultaneously displays all the help text looks more consistent.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Forms </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
label {
display: inline-block; width: 5em;
}
fieldset div {
margin-bottom: 2em;
}
fieldset .help {
display: inline-block;
}
.ui-tooltip {
width: 210px;
}
</ Style>
<Script>
$ (Function () {
var tooltips = $ ( "[title]") .tooltip ();
$ ( "<Button>")
.text ( "Show help")
.button ()
.click (function () {
tooltips.tooltip ( "open");
})
.insertAfter ( "form");
});
</ Script>
</ Head>
<Body>
<Form>
<Fieldset>
<Div>
<Label for = "firstname"> name </ label>
<Input id = "firstname" name = "firstname" title = "Please provide your first name.">
</ Div>
<Div>
<Label for = "lastname"> Last Name </ label>
<Input id = "lastname" name = "lastname" title = "Please provide your last name.">
</ Div>
<Div>
<Label for = "address"> address </ label>
<Input id = "address" name = "address" title = "your home or work address.">
</ Div>
</ Fieldset>
</ Form>
</ Body>
</ Html>
Tracking Mouse
In this instance tooltip box is positioned relative to the mouse, when the mouse moves over the element, it will follow the mouse movement.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Tracking Mouse </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
label {
display: inline-block;
width: 5em;
}
</ Style>
<Script>
$ (Function () {
$ (Document) .tooltip ({
track: true
});
});
</ Script>
</ Head>
<Body>
<P> <a href="#" title="部件的名称"> Tooltips </a> it can be bound to any element. When you hover over the element, title property will be displayed in a small box next to the element, as native as a tool tip box. </ P>
<P> However, because it is not a native tooltip box so it can be defined styles. Theme by <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> created can also be defined accordingly tooltip box styles. </ P>
<P> tooltip box can also be used to form elements to display in each region some additional information. </ P>
<P> <label for = "age"> your age: </ label> <input id = "age" title = ". Age is only used for statistical"> </ p>
<P> hover over the corresponding area to view a tool tip box. </ P>
</ Body>
</ Html>
Video Player
A virtual video player with like / share / Statistics button, each button with custom styles tooltip box.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip box (Tooltip) - Video Player </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.player {
width: 500px;
height: 300px;
border: 2px groove gray;
background: rgb (200, 200, 200);
text-align: center;
line-height: 300px;
}
.ui-tooltip {
border: 1px solid white;
background: rgba (20, 20, 20, 1);
color: white;
}
.set {
display: inline-block;
}
.notification {
position: absolute;
display: inline-block;
font-size: 2em;
padding: .5em;
box-shadow: 2px 2px 5px -2px rgba (0,0,0,0.5);
}
</ Style>
<Script>
$ (Function () {
function notify (input) {
var msg = "Selected" + $ .trim (input.data ( "tooltip-title") || input.text ());
$ ( "<Div>")
.appendTo (document.body)
.text (msg)
.addClass ( "notification ui-state-default ui-corner-bottom")
.position ({
my: "center top",
at: "center top",
of: window
})
.show ({
effect: "blind"
})
.delay (1000)
.hide ({
effect: "blind",
duration: "slow"
}, Function () {
$ (This) .remove ();
});
}
$ ( "Button") .each (function () {
var button = $ (this) .button ({
icons: {
primary: $ (this) .data ( "icon")
},
text: !! $ (this) .attr ( "title")
});
button.click (function () {
notify (button);
});
});
$ ( ".set") .buttonset ({
items: "button"
});
$ (Document) .tooltip ({
position: {
my: "center top",
at: "center bottom + 5",
},
show: {
duration: "fast"
},
hide: {
effect: "hide"
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "player"> Here is the video (HTML5?) </ Div>
<Div class = "tools">
<Span class = "set">
<Button data-icon = "ui-icon-circle-arrow-n" title = "I like this video"> like </ button>
<Button data-icon = "ui-icon-circle-arrow-s"> I do not like this video </ button>
</ Span>
<Div class = "set">
<Button data-icon = "ui-icon-circle-plus" title = "Add to Playlist"> Add to </ button>
<Button class = "menu" data-icon = "ui-icon-triangle-1-s"> Add to Favorites </ button>
</ Div>
<Button title = "Share this video"> Share </ button>
<Button data-icon = "ui-icon-alert"> marked as inappropriate </ button>
</ Div>
</ Body>
</ Html>