jQuery UI Example - Tooltip
Customizable, themable tooltips that replace native tooltips.
For more details about the tooltip widget, please refer to the Tooltip Widget API Documentation.
Default Functionality
Hover over the links, or use the tab key to cycle focus to each element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default Functionality</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="Name of the widget">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme creation application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips can also be used for form elements to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="Age is only for statistics."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
Custom Styling
Hover over the links, or use the tab key to cycle focus to each element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom Styling</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);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
<body>
<p><a href="#" title="Name of the part">Tooltips</a> can be bound to any element. When your mouse hovers over the element, the title attribute will appear in a small box next to the element, just like a native tooltip.</p>
<p>But since it is not a native tooltip, it can be styled. Themes created with <a href="http://themeroller.com" title="ThemeRoller: The jQuery UI Theme Creation Application">ThemeRoller</a> can also define the style of the tooltip accordingly.</p>
<p>Tooltips can also be used for form elements to display some additional information in each field.</p>
<p><label for="age">Your age:</label><input id="age" title="Age is only used for statistics."></p>
<p>Hover over the respective areas to see the tooltips.</p>
</body>
</html>
Custom Animations
This example demonstrates how to use the show and hide options to customize animations, or use the open event to customize animations.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom Animations</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: {
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom Animations</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 various ways to customize the animation of tooltips.</p>
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="Slide down to show">show</a> and
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="Explode to hide">hide</a> options.</p>
<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="Move down to show">open</a> event.</p>
</body>
</html>
Custom Content
Demonstrates how to combine different event delegated tooltips into a single instance by customizing the items and content options.
You might need to interact with map tooltips, a feature planned for future versions.
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
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</h2>
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="">Vienna, Austria</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<img decoding="async" src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
</a>
</div>
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>Tower Bridge</h2>
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="">London, England</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<img decoding="async" src="/wp-content/uploads/2014/03/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
</a>
</div>
<p>All images are sourced from <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are copyrighted under <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>.</p>
</body>
</html>
Forms
Use the buttons below to display help text, or simply hover over the input fields or focus on them to display the help text for each input field.
Define a fixed width in the CSS to make the display of all help texts look more consistent.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 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">First 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>
Mouse Tracking
The tooltips in this example are positioned relative to the mouse, and they follow the mouse movement.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Mouse Tracking</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="Widget name">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme creation application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
</body>
</html>
<p><label for="age">Your Age:</label><input id="age" title="Age is used for statistical purposes only."></p>
<p>Hover over the respective areas to view tooltips.</p>
</body>
</html>
Video Player
A virtual video player with like/share/stats buttons, each with custom-styled tooltips.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 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({
<script>
$(function() {
$( document ).tooltip({
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 don't 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">Flag as inappropriate</button>
</div>
</body>
</html>