Bootstrap 教程
Bootstrap 教程
阅读(6.2k) 书签 赞(1) 我要纠错

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 } 将工具提示保留在此元素的边界内。

$().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 当调用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>
以上内容是否对您有帮助：
← Bootstrap 缩略图
Bootstrap Typeahead →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号