Bootstrap 工具提示

2018-03-22 16:37 更新

Bootstrap工具提示是一個(gè)小的浮動(dòng)消息當(dāng)鼠標(biāo)懸停在組件上時(shí)。

Bootstrap的工具提示是使用CSS創(chuàng)建,通過(guò)JavaScript觸發(fā)。

要使用工具提示,我們必須定義一些自定義的 data-* 屬性。

data-placement屬性接受一個(gè)的以下四個(gè)值之一:top,bottom,left和right。

data-placement屬性定義工具提示相對(duì)于其父組件的位置。

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

通過(guò)data屬性定位工具提示

我們可以設(shè)置工具提示顯示在元素的頂部,右側(cè),底部和左側(cè)。

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

通過(guò)JavaScript定位工具提示

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

選項(xiàng)

下表列出了工具提示的選項(xiàng)。

名稱 類型 默認(rèn)值 描述
animation boolean true 將CSS漸變過(guò)渡應(yīng)用到工具提示。
html boolean false 將html插入工具提示。如果為false,將使用jQuery的text() 方法。
placement string | function "top" 設(shè)置工具提示的位置 - top | bottom| left | right | auto。
selector string false 如果提供了一個(gè)選擇器,工具提示對(duì)象將附加到指定的目標(biāo)。
title string | function "" 如果未指定title屬性,則title 選項(xiàng)是默認(rèn)的title值。
trigger string “hover focus” 指定如何觸發(fā)工具提示 - click | hover | focus | manual。
delay number | object 0 延遲顯示和隱藏工具提示的時(shí)間(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)建工具提示時(shí)使用的HTML。
viewport string | object { selector: "body", padding: 0 } 將工具提示保留在此元素的邊界內(nèi)。

$().tooltip(options)

此方法將工具提示句柄附加到一組元素。

<!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實(shí)例方法時(shí)立即觸發(fā)。
shown.bs.tooltip 當(dāng)工具提示對(duì)用戶可見(jiàn)時(shí)觸發(fā)(將等待CSS過(guò)渡效果完成)。
hide.bs.tooltip 當(dāng)調(diào)用hide實(shí)例方法時(shí)立即觸發(fā)。
hidden.bs.tooltip 當(dāng)工具提示對(duì)用戶隱藏時(shí)觸發(fā)(將等待CSS過(guò)渡效果完成)。

以下示例為:當(dāng)工具提示的淡出過(guò)渡已經(jīng)完全完成時(shí)顯示一個(gè)日志消息。

<!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)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)