Bootstrap 工具提示

2018-03-22 16:37 更新

Bootstrap工具提示是一个小的浮动消息当鼠标悬停在组件上时。

Bootstrap的工具提示是使用CSS创建，通过JavaScript触发。

要使用工具提示，我们必须定义一些自定义的 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属性定位工具提示

我们可以设置工具提示显示在元素的顶部，右侧，底部和左侧。

以下示例显示如何通过data属性设置工具提示的方向。

<!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设置工具提示的方向。

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

选项

下表列出了工具提示的选项。

名称	类型	默认值	描述
animation	boolean	true	将CSS渐变过渡应用到工具提示。
html	boolean	false	将html插入工具提示。如果为false，将使用jQuery的`text()` 方法。
placement	string \| function	"top"	设置工具提示的位置 - top \| bottom\| left \| right \| auto。
selector	string	false	如果提供了一个选择器，工具提示对象将附加到指定的目标。
title	string \| function	""	如果未指定title属性，则`title` 选项是默认的title值。
trigger	string	“hover focus”	指定如何触发工具提示 - 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>"`	创建工具提示时使用的HTML。
viewport	string \| object	`{ selector: "body", padding: 0 }`	将工具提示保留在此元素的边界内。

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

<!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	当调用show实例方法时立即触发。
shown.bs.tooltip	当工具提示对用户可见时触发（将等待CSS过渡效果完成）。
hide.bs.tooltip	当调用hide实例方法时立即触发。
hidden.bs.tooltip	当工具提示对用户隐藏时触发（将等待CSS过渡效果完成）。

以下示例为：当工具提示的淡出过渡已经完全完成时显示一个日志消息。

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

以上内容是否对您有帮助：