8.6.1 使用data-＊属性和JS触发工具提示

发表于 更新于 分类于 ， ， Waline： 本文字数： 4.1k 阅读时长 ≈ 4 分钟

8.6.1 使用data-*属性和JS触发工具提示

Bootstrap的工具提示与前面插件不同,它需要同时使用data-*属性和JS才能触发。
给按钮或链接添加工具提示,请按如下步骤进行:

  1. 为按钮或链接设置data-toggle="tooltip"属性,这个属性是固定的。
  2. 为按钮或链接设置title或data-title属性,这两个属性的属性值都可作为工具提示显示的内容。**Bootstrap优先读取title属性值作为工具提示的内容**,只有当title属性不存在或该属性值为空时才会读取data-title属性值作为工具提示的内容。
  3. 为按钮或链接设置data-placement属性,该属性控制工具提示的出现位置。该属性支持4个值:"top"、"right"、"bottom"、"left",分别指定工具提示出现在按钮或链接的顶部、右边、底部或左边。如果不指定该属性,工具提示默认出现在按钮或链接的顶部。
  4. 通过JS调用工具提示的tooltip()方法激活工具提示。例如通过如下代码调用:
    1
    $([data-toggle="tooltip").tooltip(）
    该JS代码负责获取所有被指定了data-toggle="tooltip"属性的元素,再调用它们的tooltip()方法激活工具提示功能。

程序示例

下面代码示范了Bootstrap工具提示的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 工具提示 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h4>超链接的工具提示</h4>
        <!-- 使用Bootstrap工具提示需要在标签上设置data-toggle="tooltip"属性 -->
        <!-- 使用title属性作为提示内容 -->
        <a href="#" data-toggle="tooltip" title="默认的 Tooltip">
            默认的工具提示</a><br>
        <!-- data-placement属性用于设置提示信息显示的位置 -->
        <a href="#" data-toggle="tooltip" data-placement="left" title="左侧的工具提示">
            左侧的工具提示</a><br>
        <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的工具提示">
            右侧的工具提示</a><br>
        <!-- 优先以title属性值作为提示内容 -->
        <a href="#" data-toggle="tooltip" data-title="顶部的工具提示" data-placement="top" title="xxx">
            顶部的工具提示</a><br>
        <!-- 以 data-title属性值作为提示信息 -->
        <a href="#" data-toggle="tooltip" data-placement="bottom" data-title="底部的工具提示">
            底部的工具提示</a><br>
        <!-- 如果title属性值为空字符串则显示data-title中的信息 -->
        <a href="#" data-toggle="tooltip" data-placement="bottom" data-title="yyyy" title="">
            同时又title和data-title属性,并且title属性为空</a><br>
        <a href="#" data-toggle="tooltip" data-placement="bottom" data-title="">
            提示信息都为空,则不显示提示信息</a><br>



        <h4>按钮的工具提示</h4>
        <button class="btn btn-info" data-toggle="tooltip" title="默认的 Tooltip">
            默认的工具提示</button>
        <button class="btn btn-info" data-toggle="tooltip" data-placement="left" title="左侧的工具提示">
            左侧的工具提示</button>
        <button class="btn btn-info" data-toggle="tooltip" data-placement="right" title="右侧的工具提示">
            右侧的工具提示</button>
        <button class="btn btn-info" data-toggle="tooltip" data-placement="top" title="顶部的工具提示">
            顶部的工具提示</button>
        <button class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="底部的工具提示">
            底部的工具提示</button>

    </div>
    <script type="text/javascript">
        $(function () {
            // 提示信息需要使用如下js代码来开启
            $("[data-toggle='tooltip']").tooltip();
        });
    </script>
</body>

</html>

对链接添加工具提示和对按钮添加工具提示的方法并没有太大的区别,都需要按上面介绍的步骤添加data-toggle="tooltip"、data-placement 属性和title属性。
在代码中的最后一段JS代码负责调用工具提示的tooltip()方法激发工具提示。
浏览该页面,将鼠标移动到任意一个超链接上,就可以看到Bootstrap的工具提示。
如果不指定data-placement属性,工具提示默认出现在链接或按钮的顶部。

由于工具提示本身就是一个被指定了CSS样式的<div>元素,因此如果工具提示的内容较长,可能会自动换行。如果开发者不希望工具提示的内容自动换行,则可以添加white-space:nowrap;避免这个问题。