Bootstrap工具提示是一個小的浮動消息當(dāng)鼠標(biāo)懸停在組件上時。
Bootstrap的工具提示是使用CSS創(chuàng)建,通過JavaScript觸發(fā)。
要使用工具提示,我們必須定義一些自定義的 data-*
屬性。
data-placement
屬性接受一個的以下四個值之一:top,bottom,left和right。
data-placement
屬性定義工具提示相對于其父組件的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tooltipButton").tooltip();
});
</script>
</head>
<body style="margin:30px">
<button type="button"
class="btn btn-default tooltipButton"
data-toggle="tooltip"
data-placement="bottom"
title="I am a Bootstrap button">Who am I?</button>
</body>
</html>
我們可以設(shè)置工具提示顯示在元素的頂部,右側(cè),底部和左側(cè)。
以下示例顯示如何通過data屬性設(shè)置工具提示的方向。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[data-toggle="tooltip"]").tooltip();
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">Tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" data-original-title="Another tooltip">Another tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" data-original-title="The last tip!">Last tooltip</a></li>
</ul>
</div>
</body>
</html>
以下示例顯示如何通過JavaScript設(shè)置工具提示的方向。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tip-top").tooltip({
placement : "top"
});
$(".tip-right").tooltip({
placement : "right"
});
$(".tip-bottom").tooltip({
placement : "bottom"
});
$(".tip-left").tooltip({
placement : "left"
});
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" class="tip-top" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-left" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
</body>
</html>
下表列出了工具提示的選項。
名稱 | 類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
animation | boolean | true | 將CSS漸變過渡應(yīng)用到工具提示。 |
html | boolean | false | 將html插入工具提示。如果為false,將使用jQuery的text() 方法。 |
placement | string | function | "top" | 設(shè)置工具提示的位置 - top | bottom| left | right | auto。 |
selector | string | false | 如果提供了一個選擇器,工具提示對象將附加到指定的目標(biāo)。 |
title | string | function | "" | 如果未指定title屬性,則title 選項是默認(rèn)的title值。 |
trigger | string | “hover focus” | 指定如何觸發(fā)工具提示 - click | hover | focus | manual。 |
delay | number | object | 0 | 延遲顯示和隱藏工具提示的時間(ms)。 |
container | string | false | false | 向指定元素追加提示工具。例:container: "body" |
template | string | "<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>" | 創(chuàng)建工具提示時使用的HTML。 |
viewport | string | object | { selector: "body", padding: 0 } | 將工具提示保留在此元素的邊界內(nèi)。 |
此方法將工具提示句柄附加到一組元素。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTooltip").tooltip({
title : "title attribute."
});
});
</script>
<style type="text/css">
.bs-example{
margin: 100px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>
<a href="#" data-toggle="tooltip" id="myTooltip">Tooltip Example</a>
</p>
</div>
</body>
</html>
以下代碼顯示如何使用以下方法。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".show-tooltip").click(function(){
$("#myTooltip").tooltip("show");
});
$(".hide-tooltip").click(function(){
$("#myTooltip").tooltip("hide");
});
$(".toggle-tooltip").click(function(){
$("#myTooltip").tooltip("toggle");
});
$(".destroy-tooltip").click(function(){
$("#myTooltip").tooltip("destroy");
});
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>
<a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Tooltip Example</a>
</p>
<div>
<p>Click on the following buttons to control the tooltip manually.</p>
<input type="button" class="btn btn-primary show-tooltip" value="Show">
<input type="button" class="btn btn-warning hide-tooltip" value="Hide">
<input type="button" class="btn btn-success toggle-tooltip" value="Toogle">
<input type="button" class="btn btn-danger destroy-tooltip" value="Destroy">
</div>
</div>
</body>
</html>
我們可以使用以下工具提示的事件。
事件 | 描述 |
---|---|
show.bs.tooltip | 當(dāng)調(diào)用show實例方法時立即觸發(fā)。 |
shown.bs.tooltip | 當(dāng)工具提示對用戶可見時觸發(fā)(將等待CSS過渡效果完成)。 |
hide.bs.tooltip | 當(dāng)調(diào)用hide實例方法時立即觸發(fā)。 |
hidden.bs.tooltip | 當(dāng)工具提示對用戶隱藏時觸發(fā)(將等待CSS過渡效果完成)。 |
以下示例為:當(dāng)工具提示的淡出過渡已經(jīng)完全完成時顯示一個日志消息。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize tooltip
$("[data-toggle="tooltip"]").tooltip({
placement : "top"
});
// Fire tooltip event
$("[data-toggle="tooltip"]").on("hidden.bs.tooltip", function(){
console.log("Tooltip has been completely closed.");
});
});
</script>
<style type="text/css">
.bs-example{
margin: 100px 50px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-original-title="Default tooltip">Tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="Another tooltip">Another tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="The last tip!">Last tooltip</a></li>
</ul>
</div>
</body>
</html>
更多建議: