时间:2021-07-01 10:21:17 帮助过:5人阅读
提示工具(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 class="container"> <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 class="container"> <div class="page-header"> <h1>ToolTip提示工具实例</h1> </div> <div> <p>这是一个美丽的<a href="#" data-toggle="tooltip" title="右边的姑娘" data-placement="right">姑娘</a></p> <p>这是一个美丽的<button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="左边的姑娘" data-placement="left">姑娘</button></p> <p>这是一个美丽的<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="上边的姑娘" data-placement="top">姑娘</button></p> <p>这是一个美丽的<button type="button" class="btn btn-sm btn-success" data-toggle="tooltip" title="下边的姑娘" data-placement="bottom">姑娘</button></p> </div> </div> <script> $(function () { // 启动全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
效果如下:
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。