提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（Tooltip）放在它们的触发元素后面。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>ToolTip提示工具</title> </head> <body> <div> <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip">Tooptip</a> </div> <script> $(function () { // 启动全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 JQuery 激活它（读取 JavaScript）。使用下面的脚本来启用页面中的所有的提示工具（Tooltip）：
$(function () { // 启动全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); })
下面是一个实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>ToolTip提示工具实例</title> </head> <body> <div> <div> <h1>ToolTip提示工具实例</h1> </div> <div> <p>这是一个美丽的<a href="#" data-toggle="tooltip" title="右边的姑娘" data-placement="right">姑娘</a></p> <p>这是一个美丽的<button type="button" data-toggle="tooltip" title="左边的姑娘" data-placement="left">姑娘</button></p> <p>这是一个美丽的<button type="button" data-toggle="tooltip" title="上边的姑娘" data-placement="top">姑娘</button></p> <p>这是一个美丽的<button type="button" data-toggle="tooltip" title="下边的姑娘" data-placement="bottom">姑娘</button></p> </div> </div> <script> $(function () { // 启动全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
效果如下：
【Bootstrap基本插件学习笔记之Tooltip提示工具(18)】相关文章：
★ 让焦点自动跳转
★ 详解Javacript和AngularJS中的Promises