8.6.1 使用data-*属性和JS触发工具提示
Bootstrap
的工具提示与前面插件不同,它需要同时使用data-*
属性和JS才能触发。
给按钮或链接添加工具提示,请按如下步骤进行:
- 为按钮或链接设置
data-toggle="tooltip"
属性,这个属性是固定的。
- 为按钮或链接设置
title
或data-title
属性,这两个属性的属性值
都可作为工具提示显示的内容
。Bootstrap
优先读取title
属性值作为工具提示的内容,只有当title
属性不存在或该属性值为空时才会读取data-title
属性值作为工具提示的内容。
- 为按钮或链接设置
data-placement
属性,该属性控制工具提示的出现位置
。该属性支持4个值:"top"
、"right"
、"bottom"
、"left"
,分别指定工具提示出现在按钮或链接的顶部、右边、底部或左边。如果不指定该属性,工具提示默认出现在按钮或链接的顶部。
- 通过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> <a href="#" data-toggle="tooltip" title="默认的 Tooltip"> 默认的工具提示</a><br> <a href="#" data-toggle="tooltip" data-placement="left" title="左侧的工具提示"> 左侧的工具提示</a><br> <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的工具提示"> 右侧的工具提示</a><br> <a href="#" data-toggle="tooltip" data-title="顶部的工具提示" data-placement="top" title="xxx"> 顶部的工具提示</a><br> <a href="#" data-toggle="tooltip" data-placement="bottom" data-title="底部的工具提示"> 底部的工具提示</a><br> <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 () { $("[data-toggle='tooltip']").tooltip(); }); </script> </body>
</html>
|
对链接添加工具提示和对按钮添加工具提示的方法并没有太大的区别,都需要按上面介绍的步骤添加data-toggle="tooltip"
、data-placement
属性和title
属性。
在代码中的最后一段JS代码负责调用工具提示的tooltip()
方法激发工具提示。
浏览该页面,将鼠标移动到任意一个超链接上,就可以看到Bootstrap
的工具提示。
如果不指定data-placement
属性,工具提示默认出现在链接或按钮的顶部。
由于工具提示本身就是一个被指定了CSS
样式的<div>
元素,因此如果工具提示的内容较长,可能会自动换行。如果开发者不希望工具提示的内容自动换行,则可以添加white-space:nowrap
;避免这个问题。
原文链接: 8.6.1 使用data-*属性和JS触发工具提示