阅读(2447)
赞(17)
jQuery UI 实例 – 工具提示框（Tooltip）
2015-09-23 20:56:07 更新
jQuery UI 实例 - 工具提示框（Tooltip）
jQuery UI可自定义的、可主题化的工具提示框，替代原生的工具提示框。
如需了解更多有关tooltip部件的细节，请查看API文档工具提示框部件（Tooltip Widget）。
默认功能
悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
<p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
<p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
<p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
<p>悬停在相应的区域上查看工具提示框。</p>
</body>
</html>自定义样式
悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
<p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
<p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
<p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
<p>悬停在相应的区域上查看工具提示框。</p>
</body>
</html>自定义动画
本实例演示了如何使用show和hide选项来自定义动画，也可以使用open事件来自定义动画。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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>这里有多种方式自定义工具提示框的动画。</p>
<p>您可以使用 <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" rel="external nofollow" target="_blank" title="向下滑动显示">show</a> 和
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" rel="external nofollow" target="_blank" title="爆炸隐藏">hide</a> 选项。</p>
<p>您也可以使用 <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" rel="external nofollow" target="_blank" title="向下移动显示">open</a> 事件。</p>
</body>
</html>自定义内容
该示例演示如何通过自定义items和content选项，来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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¢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" rel="external nofollow" target="_blank" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG" rel="external nofollow" target="_blank" >
<img src="https://atts.zijiebao.com/attachments/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" rel="external nofollow" target="_blank" data-geo="">英国伦敦（London, England）</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg" rel="external nofollow" target="_blank" >
<img src="https://atts.zijiebao.com/attachments/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all">
</a>
</div>
<p>所有的图片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page" rel="external nofollow" target="_blank" >Wikimedia Commons</a>，且归 <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" rel="external nofollow" target="_blank" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p>
</body>
</html>表单
使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。
在CSS中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 表单</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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">名字</label>
<input id="firstname" name="firstname" title="请提供您的名字。">
</div>
<div>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" title="请提供您的姓氏。">
</div>
<div>
<label for="address">地址</label>
<input id="address" name="address" title="您的家庭或工作地址。">
</div>
</fieldset>
</form>
</body>
</html>跟踪鼠标
本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(function() {
$( document ).tooltip({
track: true
});
});
</script>
</head>
<body>
<p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
<p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
<p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
<p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
<p>悬停在相应的区域上查看工具提示框。</p>
</body>
</html>视频播放器
一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<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 = "已选择 " + $.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">这里是视频 (HTML5?)</div>
<div class="tools">
<span class="set">
<button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button>
<button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button>
</span>
<div class="set">
<button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
<button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button>
</div>
<button title="分享这个视频">分享</button>
<button data-icon="ui-icon-alert">标记为不恰当</button>
</div>
</body>
</html>