Bootstrap JavaScript插件:工具提示(tooltip.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

Bootstrap 提示工具(Tooltip)插件工具可以通过鼠标移动到选定的特定的元素上时,显示出相关的提示语。当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。
静态样式:

1.png

用法

提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。有以下两种方式添加提示工具(tooltip):

  • 通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加data-toggle="tooltip"即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。
<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):
    $('#identifier').tooltip(options)
    

    由于性能的原因,不能通过 data 属性直接激活工具提示插件,需要通过Javascript代码手动初始化它。只有初始化之后,将鼠标移动到链接上,才会显示相关的提示信息。否则,是不会显示任何提示信息的。

$(function () { $("[data-toggle='tooltip']").tooltip(); });

案例如下:

<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>

2.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不能与其他触发方式组合使用
viewport string object function{ selector: 'body', padding: 0 }使工具提示始终在元素的边界之内。
表中 [1] 表示:
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

使用选项时,JavaScript使用以下语法格式来触发工具提示:
$('#example').tooltip(options)

其中,'#example' 为需要显示工具提示的页面元素,options 为使用对象表示的的选项。如,以下代码将以HTML文本格式显示一幅图像作为工具提示的内容,并延迟一秒显示、延迟半秒隐藏:

    <a href="##">小鸟</a>
$('a').tooltip({
   
   
    html:true,
    title:'<p>一只小鸟</p> <img src="../img/timg.jpg" width="170px" height="170px"/>',
    placement:'bottom',
    delay:{
   
   show:500,hide:100}
})

运行效果如下:

3.png


工具提示插件的方法

1、.tooltip(options)
使用一个可选的对象参数 options调用某个页面元素的工具提示。如:

$('某个元素').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事件被触发之前)返回主调函数。如:

$('#element').tooltip('show')

3、.tooltip('hide')
手动隐藏某个页面元素的工具提示,并在工具提示被实际显示出来之前(即hidden.bs.tooltip事件被触发之前)返回主调函数。如:

$('#element').tooltip('hide')

4、.tooltip('toggle')
手动打开或隐藏某个页面元素的工具提示,并在工具提示被实际显示出来之前(即shown.bs.tooltip或hidden.bs.tooltip事件被触发之前)返回主调函数。如:

$('#element').tooltip('toggle')

5、.tooltip('destroy')
手动隐藏并销毁某个页面元素的工具提示。如:

$('#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触发事件之后,触发该事件。
 $('#myTooltip').on('hidden.bs.tooltip', function () {
   
   
     alert("工具提示已经隐藏。");
 });

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
19天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
|
20天前
|
机器学习/深度学习 人工智能 JavaScript
js和JavaScript
js和JavaScript
21 4
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
27 2
|
3天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
4 0
|
8天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
19天前
|
JavaScript 前端开发
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
14 1
|
28天前
|
JavaScript 前端开发
js开发:请解释什么是模块化(modularization),并说明如何在JavaScript中实现模块化。
模块化将复杂系统拆分为松散耦合的模块,提高代码可读性、可维护性、可复用性和可扩展性。JavaScript模块化历经CommonJS(Node.js中常见,使用`require()`和`module.exports`)、AMD(RequireJS,异步加载,`define()`和`require()`)和ES6 Modules(官方标准,`import`和`export`)三个阶段。打包工具如Webpack、Rollup处理兼容性问题,使模块化代码能在各种环境中运行。
|
30天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
10 2
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
35 0