🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 工具提示 tooltip.js Bootstrap 提示工具(Tooltip)插件工具可以通过鼠标移动到选定的特定的元素上时,显示出相关的提示语。当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。 静态样式: ![](https://img.kancloud.cn/c6/c2/c6c202b10ffd548d6f76fad952d2aec7_854x80.png) **用法** 提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。有以下两种方式添加提示工具(tooltip): * **通过 data 属性**:如需添加一个提示工具(tooltip),只需向一个锚标签添加**data-toggle="tooltip"**即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。 ```html <a href="#" data-toggle="tooltip" title="This is the tooltip">Tooltip Example</a> <a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a> ``` * **通过 JavaScript**:通过 JavaScript 触发提示工具(tooltip): ```js $('#identifier').tooltip(options) ``` > 由于性能的原因,不能通过 data 属性直接激活工具提示插件,需要通过Javascript代码手动初始化它。只有初始化之后,将鼠标移动到链接上,才会显示相关的提示信息。否则,是不会显示任何提示信息的。 ~~~ $(function () { $("[data-toggle='tooltip']").tooltip(); }); ~~~ 案例如下: ```html <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> ``` ![](https://img.kancloud.cn/53/90/5390957c02694d4b13f6465f6340d5fd_679x66.png) > 1. 不要试图显示隐藏元素的工具提示。当目标元素为display:none;时调用$(…).tooltip('show')将导致工具提示的位置不正确。 >2. 禁用元素的工具提示需要包装元素。要向disabled或.disabled元素添加工具提示,请将该元素放在\<div\>内,并将工具提示应用于该\<div\>。 ***** **工具提示插件的选项** Bootstrap为工具提示插件提供了 10 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。 | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | animation | boolean | true | 为工具提示应用CSS淡入淡出过渡效果 | | container | string false | false | 将提示条附加到特定元素,如 container: 'body' | | delay | number object | 0 | 延迟显示和隐藏提示条的时间(毫秒)——手动触发提示条时无效如果只指定一个数值,则隐藏和显示都使用该数值。对象的结构为 delay: { show: 500, hide: 100 }| | html | boolean | false | 提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。如果担心XSS攻击,那就使用文本 | | placement | string function | 'top' | 设置提示条的位置,取值:top | bottom | left | right | | selector | string | false | 如果提供了选择器,在触发该选择器时才显示提示信息 | | template | string | \[1\] | 使用HTML面板创建工具提示。工具提示的title将被注入到.tooltip-inner中。.tooltip-arrow成为工具提示的箭头。最外层的包装元素应该拥有.tooltip类| | title | string function | '' | 如果title属性不存在,则使用默认值 '' | |trigger|string|'hover focus'|工具提示的触发方式:click 、hover 、 focus 、manual。可以传入多个触发方式,以空格分隔。manual不能与其他触发方式组合使用|viewportstring | object | function{ selector: 'body', padding: 0 }使工具提示始终在元素的边界之内。 viewport|string \| object \| function|{ selector: 'body', padding: 0 }|使工具提示始终在元素的边界之内。 ```markdown 表中 [1] 表示: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' ``` 使用选项时,JavaScript使用以下语法格式来触发工具提示: $('#example').tooltip(options) 其中,'#example' 为需要显示工具提示的页面元素,options 为使用对象表示的的选项。如,以下代码将以HTML文本格式显示一幅图像作为工具提示的内容,并延迟一秒显示、延迟半秒隐藏: ```html <a href="##">小鸟</a> ``` ```js $('a').tooltip({ html:true, title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>', placement:'bottom', delay:{show:500,hide:100} }) ``` 运行效果如下: ![](https://img.kancloud.cn/68/c2/68c2b6e28ee91388880c82088c9ccdd1_602x297.png) ***** **工具提示插件的方法** 1、.tooltip(options) 使用一个可选的对象参数 options调用某个页面元素的工具提示。如: ```js $('某个元素').tooltip({ html:true, title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>', placement:'bottom', delay:{show:500,hide:100} }) ``` 2、.tooltip('show') 手动触发某个页面元素的工具提示,并在工具提示被实际显示出来之前(即shown.bs.tooltip事件被触发之前)返回主调函数。如: ```js $('#element').tooltip('show') ``` 3、.tooltip('hide') 手动隐藏某个页面元素的工具提示,并在工具提示被实际显示出来之前(即hidden.bs.tooltip事件被触发之前)返回主调函数。如: ```js $('#element').tooltip('hide') ``` 4、.tooltip('toggle') 手动打开或隐藏某个页面元素的工具提示,并在工具提示被实际显示出来之前(即shown.bs.tooltip或hidden.bs.tooltip事件被触发之前)返回主调函数。如: ```js $('#element').tooltip('toggle') ``` 5、.tooltip('destroy') 手动隐藏并销毁某个页面元素的工具提示。如: ```js $('#element').tooltip('destroy') ``` ***** **工具提示插件的事件** Bootstrap为工具提示插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。 | 事件 | 含义 | | --- | --- | | show.bs.tooltip | show方法调用之后,立即触发该事件。 | | shown.bs.tooltip | 当工具提示已经对用户可见(并且过渡效果执行完毕)之后,触发该事件 | | hide.bs.tooltip | hide方法调用之后,立即触发该事件 | | hidden.bs.tooltip | 当工具提示已经被隐藏(并且过渡效果执行完毕)之后,触发该事件 | | inserted.bs.tooltip | 当向DOM插入工具提示模板时,在模板插入完成并且show.bs.tooltip触发事件之后,触发该事件。 | ```js $('#myTooltip').on('hidden.bs.tooltip', function () {     alert("工具提示已经隐藏。"); }); ```