閱讀(6.1k) 書簽贊(1) 我要糾錯

Bootstrap 工具提示

2018-03-22 16:37 更新

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>

通過data屬性定位工具提示

我們可以設(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定位工具提示

以下示例顯示如何通過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>

以下代碼顯示如何使用以下方法。

$("#myTooltip").tooltip("show");
$("#myTooltip").tooltip("hide");
$("#myTooltip").tooltip("toggle");
$("#myTooltip").tooltip("destroy");

<!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>

以上內(nèi)容是否對您有幫助：

← Bootstrap 縮略圖

Bootstrap Typeahead →

寫筆記

我要補充

Bootstrap 工具提示

通過data屬性定位工具提示

通過JavaScript定位工具提示

選項

$().tooltip(options)

工具提示方法

事件

Bootstrap 工具提示

通過data屬性定位工具提示

通過JavaScript定位工具提示

選項

$().tooltip(options)

工具提示方法

事件

推薦文章

推薦教程

推薦課程