BootStrap之 提示工具（Tooltip）插件
阿新 • • 發佈：2019-02-25
fun sheet utf-8 gin 默認 toggle html static 必須
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 工具提示（Tooltip）插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>工具提示（Tooltip）插件 - 錨</h4>
這是一個 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默認的 Tooltip">默認的 Tooltip</a>.
這是一個 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">左側的 Tooltip</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">頂部的 Tooltip</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
這是一個 <a href="#" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip</a>
<br>
<h4>工具提示（Tooltip）插件 - 按鈕</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="默認的 Tooltip"> 默認的 Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">左側的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">頂部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip</button>
<script>
$(function () { $("[data-toggle=‘tooltip‘]").tooltip(); }); //在使用這個插件前，需要先註冊。註意 其中的data-toggle是可以修改的，但是
data-toggle="tooltip" 元素中屬性必須與註冊時的一致
</script> </body> </html>
1.元素配置三個屬性
data-toggle="tooltip" 前面的屬性和初始註冊的值必須是一致的
data-placement="bottom" 表示提示框顯示的位置
title="底部的 Tooltip" 提示框顯示的內容，實際上只有這一個屬性也會提示，但是效果不好，所以我們使用此插件來優化提示效果
參考資料：http://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html
BootStrap之 提示工具（Tooltip）插件