蓝蓝站点

Java读书笔记

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

8.8.2 使用JS关闭警告框

Bootstrap为警告框提供了一个alert()方法,该方法有两个用法。

方法 描述
$('警告框选择器').alert() 不传参数的用法,该方法让警告框监听具有data-dismiss="alert"属性的按钮的单击事件,不过如果通过data-*属性进行初始化则无须使用,因此实际上不带参数的alert()方法没有多大的作用。
$('警告框选择器').alert('close') 传入'close'字符串的用法,该方法将会关闭警告框,并从DOM中将其删除。如果为警告框指定了.fade和.in样式,则警告框淡出后才会被删除。
小结:很少使用警告框不传参数的alert()方法,但alert('close')则可用于关闭警告框。

例如如下示例。

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

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <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">
        <!-- class为alert表示这是一个警告框 -->
        <div class="alert alert-danger" role="alert" id="myAlert">
            危险！请注意
        </div>
        <!-- 通过JS关闭警告框 -->
        <button id="bn" type="button" class="btn btn-primary" onclick="$('#myAlert').alert('close')">
            关闭警告框
        </button>
    </div>
</body>

</html>

在该代码中定义了一个警告框,在警告框外定义了一个按钮,该按钮并未使用任何data-*属性来初始化警告框的关闭行为。
而是为按钮的onclick事件绑定了处理代码,在处理代码中调用了警告框的alert('close')方法,该方法将会关闭警告框。因此用户单击页面中关闭按钮时同样可关闭警告框。

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

8.8 警告框

前一章已经介绍了警告框的基本用法,本章不仅会介绍它的用法,并且会更系统地介绍警告框的各种激发机制。

8.8.1 使用data-*属性关闭警告框

前一章已经讲过:

  • 当关闭按钮位于警告框内部时,只要为该按钮指定了data-dismiss="alert"属性,当用户单击该按钮时,警告框就会随之关闭。
  • 当关闭按钮不在警告框之内时,除了要指定data-dismiss="alert"属性之外,还要指定data-target属性,data-target属性指定该按钮用于关闭哪个警告框。

程序示例

如下代码所示。

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
<!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">
        <!-- class属性为alert表示这是一个警告框 -->
        <div class="alert alert-danger" role="alert" id="myAlert">
            危险！请注意
        </div>
        <!-- 关闭按钮位于警告框之外时: -->
        <!-- data-dismiss="alert"表示该按钮可以关闭警告框 -->
        <!-- data-target="#myAlert"指定要关闭哪个警告框 -->
        <button type="button" class="btn btn-primary" data-dismiss="alert" data-target="#myAlert">
            关闭警告框
        </button>
    </div>
</body>

</html>

在该代码中定义的按钮不在警告框内,所以要:

  • 为按钮指定了data-dismiss="alert"属性,这意味着该按钮时用于关闭警告框。
  • 在按钮上指定data-target="#myAlert"属性,这意味着该按钮用于关闭id为myAlert的警告框。

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

8.7.4 弹出框的事件

Bootstrap为弹出框提供了如下事件。

事件 描述
show.bs.popover 当弹出框开始显示时触发该事件。
shown.bs.popover 当弹出框显示完成时触发该事件。
inserted.bs.popover 当弹出框的HTML模板加入DOM文档时触发该事件,该事件发生在show.bs.popover事件之后。
hide.bs.popover 当弹出框开始隐藏时触发该事件。
hidden.bs.popover 当弹出框隐藏完成时触发该事件。
弹出框的事件的触发时机与工具提示的事件的触发时机基本类似,此处不再给出示例。

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

8.7.3 弹出框支持的属性

当使用data-*属性定义弹出框时,Bootstrap 除了提供了data-toggle、data-placenment、data-content属性之外,Bootstrap还为弹出框提供了大量其他支持属性,下面分别介绍它们。

Bootstrap为弹出框提供的属性

属性 描述
data-animation boolean属性，用于指定是否对弹出框应用.fade过渡效果。
data-container 指定将弹出框附加到特定元素上，该属性支持各种选择器或false值，false值表示不附加。比如container:'body'表明将弹出框附加到页面<body>元素上。
data-content 指定弹出框的内容。
data-delay 指定延迟多少毫秒后显示或关闭弹出框；该属性支持简单数值或形如{'show':500,'hide':200}的对象，该对象指定延迟500毫秒显示弹出框，延迟200毫秒关闭弹出框。
data-html 指定是否将HTML代码直接转换为弹出框。该属性默认为false，Bootstrap先使用text()方法处理工具提示内容，然后再添加弹出框。
data-placement 指定弹出框的出现位置。该属性的默认值是'right'。
data-selector 如果指定了该属性,那么弹出框将会由该属性表示的HTML元素负责代理。
data-template 指定弹出框的HTML模板,该属性的默认值是Bootstrap提供的HTML模板。
data-title 设置默认的弹出框的标题。当title属性不存在或属性值为空时,该属性才会发挥作用。
data-trigger 设置触发弹出框的方法,可选值为click、hover、focus、manual,该属性的默认值是click—这意味着需要通过鼠标单击来触发弹出框。该属性还支持多个属性值的组合。比如`click

popover方法参数

使用JS激活弹出框时要调用弹出框的popover()方法,调用该方法时可传入如下参数。

  1. 字符串参数:该字符串参数支持'show'、'hide'、'toggle'和'destroy'等字符串,分别表示显示弹出框、隐藏弹出框、切换弹出框的显示/隐藏、销毁弹出框。如果调用popover()方法时传入了'destroy'字符串,那就意味着要销毁该弹出框,因此页面以后再也不会显示该弹出框。
  2. JS对象参数:该JS对象支持上面介绍的以data-开头的各种选择,只是无须使用data-前缀。在前面示例中激活弹出框时就传入了{html:true}对象作为参数

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

8.7.2 焦点触发的弹出框

默认情况下,Bootstrap的弹出框需要通过鼠标单击来触发显示、隐藏。与工具提示类似的是,Bootstrap也允许改变弹出框的触发方式:通过trigger选项改变弹出框的触发方式,添加trigger通过在HTML元素中需使用data-trigger属性。
为了有更好的跨浏览器和跨平台效果,建议使用<a>元素,而不能使用<button>元素,并且还需要指定role="button"属性和tabindex属性。

程序示例

如下代码示范了焦点触发的弹出框。

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
<!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">
        <!-- data-toggle="popover"属性表示该链接可以触发弹出框 -->
        <!-- title属性表示弹出框的内容 -->
        <!-- data-trigger设置在得到焦点时触发弹出框的 -->
        <!-- tabindex="0"表示当第一次按下tab键时该链接将获得焦点 -->
        <a class="btn btn-info" role="button" data-toggle="popover" title="焦点触发的弹出框" tabindex="0" data-trigger="focus"
            data-content="弹出框的内容<br>第二行内容">
            焦点触发的弹出框</a>
    </div>
    <script type="text/javascript">
        $(function () {

            $("[data-toggle='popover']").popover({
                // 运行弹出框内容中带有html代码
                html: true
            });
        });
    </script>
</body>

</html>

上面的代码使用<a>标签定义了一个按钮,由于该链接只是作为按钮使用,因此为该按钮指定了role="button"属性。<a>标签指定了data-trigger="focus",这意味着该弹出框将会通过焦点来触发:得到焦点时打开弹出框,失去焦点时关闭弹出框。
将tabindex设为0是为了保证该按钮最先得到焦点,可就是当用户第一次按下Tab键时,该按钮将会得到焦点。
浏览该页面,按下键盘上的Tab键,将会打开该按钮的弹出框;再次按下Tab键(或用鼠标单击页面上其他任意地方),该按钮失去焦点,弹出框将会被自动关闭。

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

8.7 弹出框

弹出框与工具提示非常相似,只是弹出框更大,并且支持标题和内容,而且支持的内容更多。与工具提示不同的是,弹出框需要用户单击链接或按钮才会显示出来,用户再次单击链接或按钮会隐藏弹出框。
弹出框插件依赖popover.js和tooltip.js库。这两个JS库包含在bootstrap.js或bootstrap.min.js中。

8.7.1 使用data-*属性和JS触发弹出框

弹出框也需要同时使用data-*属性和JS才能触发。
给按钮或链接添加弹出框,请按如下步骤进行:

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

下面代码示范了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
<!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>
        <!-- data-toggle表示该按钮可以切换弹出框 -->
        <!-- title属性指定弹出框的 标题  -->
        <!-- data-content属性指定弹出框的 内容 -->
        <a href="#" data-toggle="popover" title="默认的弹出框" data-content="弹出框的内容<br>第二行内容">
            默认的弹出框</a><br>
        <!-- data-placement指定弹出框的 位置 -->
        <a href="#" data-toggle="popover" data-placement="left" title="左侧的弹出框" data-content="弹出框的内容<br>第二行内容">
            左侧的弹出框</a><br>
        <a href="#" data-toggle="popover" data-placement="right" title="右侧的弹出框" data-content="弹出框的内容<br>第二行内容">
            右侧的弹出框</a><br>
        <!-- 当title属性不存在或者为空时以data-title属性值作为 弹出框的标题 -->
        <a href="#" data-toggle="popover" data-title="顶部的弹出框" data-placement="top" title=""
            data-content="弹出框的内容<br>第二行内容">
            顶部的弹出框</a><br>
        <a href="#" data-toggle="popover" data-placement="bottom" data-title="底部的弹出框" data-content="弹出框的内容<br>第二行内容">
            底部的弹出框</a><br>
        <h4>按钮的弹出框</h4>
        <button class="btn btn-info" data-toggle="popover" title="默认的弹出框" data-content="弹出框的内容<br>第二行内容">
            默认的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="left" title="左侧的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            左侧的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="right" title="右侧的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            右侧的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="top" title="顶部的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            顶部的弹出框</button>
        <button class="btn btn-info" data-toggle="popover" data-placement="bottom" title="底部的弹出框"
            data-content="弹出框的内容<br>第二行内容">
            底部的弹出框</button>
    </div>
    <script type="text/javascript">
        $(function () {
            // 开启弹出框
            $("[data-toggle='popover']").popover({
                html: true
            });
        });
    </script>
</body>

</html>

从上面代码可以看出,对链接添加弹出框和对按钮添加弹出框的方法并没有太大的区别,都需要按上面介绍的步骤添加data-toggle="popover"、data-placement 属性和title、data-content属性。如果不指定data-placement属性,弹出框默认出现在链接或按钮的右边。

最后一段JS代码负责调用弹出框的popover()方法激发弹出框。需要说明的是,由于弹出框的内容中包含HTML 的换行符(<br>元素),因此上面代码在调用popover()方法时传入的JS对象中指定html:true,这表明让弹出框内容支持HTML。

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

8.6.3 工具提示的事件

Bootstrap为工具提示提供了如下事件。

事件 描述
show.bs.tooltip 当工具提示开始显示时触发该事件。
inserted.bs.tooltip 当工具提示的HTML模板加入DOM文档时
shown.bs.tooltip 当工具提示显示完成时触发该事件。
hide.bs.tooltip 当工具提示开始被隐藏时触发该事件。
hidden.bs.tooltip 当工具提示隐藏完成时触发该事件。

程序示例

下面代码示范了工具提示的事件触发顺序。

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
<!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">
        <!-- 要是用工具提示必须设置data-toggle="tooltip"属性 -->
        <!-- title属性中放提示信息 -->
        <button class="btn btn-info" data-toggle="tooltip" title="工具提示事件">
            工具提示事件</button>
    </div>
    <script type="text/javascript">
        $(function () {
            // 所有提示信息在下方显示
            $("[data-toggle='tooltip']").tooltip({
                placement: "bottom"
            });
            $("[data-toggle='tooltip']").on('show.bs.tooltip', function () {
                console.log("show.bs.tooltip");
            }).on('shown.bs.tooltip', function () {
                console.log("shown.bs.tooltip");
            }).on('hide.bs.tooltip', function () {
                console.log("hide.bs.tooltip");
            }).on('hidden.bs.tooltip', function () {
                console.log("hidden.bs.tooltip");
            }).on('inserted.bs.tooltip', function () {
                console.log("inserted.bs.tooltip");
            })
        });
    </script>
</body>

</html>

当用户把鼠标移动到按钮上时,工具提示显示出来;当用户把鼠标从按钮上移开时,工具提示被隐藏起来。在这个过程中,工具提示触发事件的顺序如下所示:

1
2
3
4
5
show.bs.tooltip                         tooltip-event.html:28:13
inserted.bs.tooltip                     tooltip-event.html:36:13
shown.bs.tooltip                       tooltip-event.html:30:13
hide.bs.tooltip                          tooltip-event.html:32:13
hidden.bs.tooltip                      tooltip-event.html:34:13

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

8.6.2 工具提示支持的属性

设置在要显示提示信息的标签上属性

当使用data-*属性定义工具提示时,Bootstrap除了提供了data-toggle、data-placenment属性之外,Bootstrap还为工具提示提供了其他大量支持属性,下面属性设置在要显示提示信息的标签上,如设置在<a>元素,或<button>元素上

属性 描述
data-animation boolean属性,用于指定是否对工具提示应用.fade过渡效果。
data-container 指定将工具提示附加到特定元素上,该属性支持各种选择器或false值,false值表示不附加。比如container: 'body'表明将工具提示附加到页面<body>元素上。
data-delay 指定延迟多少毫秒来显示或关闭工具提示;该属性支持简单数值或形如{'show':500,'hide':200}的对象,该对象指定延迟500 ms显示工具提示,延迟200 ms关闭工具提示。
data-html 指定是否将HTML代码直接转换为工具提示。该属性默认为false,Bootstrap先使用text()方法处理工具提示内容,然后再添加工具提示。
data-placement 指定工具提示的出现位置。该属性的默认值是'top'。
data-selector 如果指定了该属性,那么工具提示将会由该属性表示的HTML元素负责代理。
data-template 指定工具提示的HTML模板,该属性的默认值是Bootstrap提供的HTML模板。
data-title 设置默认的工具提示内容。当title属性不存在或属性值为空时,该属性才会发挥作用。
data-trigger 设置触发工具提示的方法,可选值为click,hover,focus,manual,该属性的默认值是hover。这意味着只要鼠标悬停就会触发工具提示。该属性还支持多个属性值的组合。比如`click

tooltip方法支持的参数

使用JS激活工具提示要调用工具提示的tooltip()方法,调用tooltip()方法时可传入如下参数。

  1. 字符串参数
  2. JS对象参数

字符串参数

该字符串参数支持'show'、'hide'、'toggle'和'destroy'等字符串,分别表示显示工具提示、隐藏工具提示、切换工具提示的显示/隐藏状态、销毁工具提示。如果调用tooltip()方法时传入了'destroy'字符串,那就意味着要销毁该工具提示,因此页面以后再也不会显示该工具提示。

JS对象参数

该JS对象支持上面介绍的以data-开头的各种选择,只是无须使用data-前缀。例如如下代码。

1
2
3
4
5
6
7
$(function () {
    // 提示信息需要使用如下js代码来开启
    $("[data-toggle='tooltip']").tooltip({ 
        placement: 'right',
        delay: 200
    });
});

上面代码在调用tooltip()方法时传入了一个JS对象,该对象指定了placement为right,这意味着所有工具提示都会出现在链接或按钮的右边;此外该JS对象还指定了delay为200,这意味着延迟200毫秒才会显示、隐藏工具提示。

发表于 更新于 分类于 ， ， 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;避免这个问题。

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

8.6 工具提示

我们在网页上经常会看到一种效果:当用户把鼠标悬停在某个按钮或链接上时,该按钮和链接上会出现一段提示信息,这段提示信息可以对该按钮或链接进行更详细的说明,这种提示信息就是工具提示。
实际上,浏览器本身已经提供了工具提示的支持,只要开发者为按钮或链接设置title 属性,浏览器会自动将该title 属性的值以工具提示的方式显示出来。但浏览器本身提供的工具提示比较简陋:背景色始终是淡黄色,而且字体也比较简单,远远谈不上优雅和美观。为此,Bootstrap提供了更美观的工具提示。
Bootstrap的工具提示插件依赖tooltip.js库。这个JS库包含在bootstrap.js或bootstrap.min.js中。