<body>
<div class="container">
<h1 class="page-header">对话框</h1>
<p><a title="这是一个提示信息" rel="tooltip" href="#">Tooltip</a></p>
<p><a title="提示信息标题" data-content="提示信息详细内容" rel="popover" href="#">Popover</a></p>
</div>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$("a(rel=tooltip)").tooltip()
$("a(rel=popover)").popover()
</script>
</body>
a标签
-title属性:提示信息的内容
-rel属性:值为tooltip
script标签:包含语句$("a(rel=tooltip)").tooltip(),意为,当a标签的rel属性值为tooltip时,使用tooltip插件显示提示信息。
a标签
-title属性:提示信息的标题
-data-content属性:提示信息的内容
-rel属性:值为popover
script标签:包含语句$("a(rel=popover)").popover(),意为,当a标签的rel属性值为popover时,使用popover插件显示提示信息。
鼠标悬停在文字上方时,显示工具提示信息(title的值)。
鼠标悬停在文字上方时,显示工具提示信息的标题(title的值)和内容(data-content的值)。此处只显示了提示信息的标题。