bootstrap的工具提示实例代码

时间：2021-05-28

Bootstrap 工具提示（Tooltip）插件当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

工具提示实现代码如下所示：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>XXX</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > <link rel="stylesheet" href="css/main.css" rel="external nofollow" >  </head> <body style="margin: 200px;">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="默认提示">系统默认</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bootstrop提示" data-toggle="tooltip">bootstrop的工具提示</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="animation" data-toggle="tooltip" data-animation="false">data-animation</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="<b>html</b>" data-toggle="tooltip" data-html="true">data-html</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="placement" data-toggle="tooltip" data-placement="bottom">data-placement</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="trigger" data-toggle="tooltip" data-trigger="click">data-trigger</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="delay" data-toggle="tooltip" data-delay="2000">data-delay</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="template" data-toggle="tooltip" data-template="<b>123<b/>">data-template</a> <br> <br> <br>  <div id="selection"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" rel="tooltip" data-toggle="tooltip">绑定选择器</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" data-toggle="tooltip">绑定选择器</a> </div> <br> <br> <br>   <div class="btn-group"> <button class="btn btn-default" title="按钮" data-toggle="tooltip">1</button> <button class="btn btn-default" title="按钮" data-toggle="tooltip">2</button> <button class="btn btn-default" title="按钮" data-toggle="tooltip">3</button> </div> <br> <br> <br> <br>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="点击弹出提示" data-toggle="tooltip" id="clc">点击弹出提示</a> <button class="btn btn-default" id="btn">点击弹出或隐藏提示</button> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> <script> // $('a').tooltip(); $('#selection').tooltip({ selector: 'a[rel=tooltip]' }); $('button').tooltip({ delay: { show: 100, hide: 100 }, container: 'body' }); $('#clc').tooltip({ trigger:'click' }); $('#btn').on('click', function () { $('#clc').tooltip('show'); }); /*4个事件 * show.bs.tooltip 在提示框显示前立即触发 shown.bs.tooltip 在提示框完全显示给用户之后触发 hide.bs.tooltip 在提示框隐藏前立即触发 hidden.bs.tooltip 在提示框完全隐藏之后触发 * */ $('a').on('show.bs.tooltip', function () { alert('在提示框显示前立即触发'); }); </script> </body> </html>

bootstrap的工具提示实例代码

相关文章

BootStrap daterangepicker 双日历控件

Bootstrap基本插件学习笔记之Popover提示框(19)

Bootstrap下拉菜单样式

Bootstrap显示与隐藏简单实现代码

Bootstrap按钮组简单实现代码