Bootstrap每天必学之工具提示(Tooltip)插件


Posted in Javascript onApril 26, 2016

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

Bootstrap每天必学之工具提示(Tooltip)插件

如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js。或者,正如Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
一、用法
工具提示(Tooltip)插件根据需求生成内容和标记,默认情况下是把工具提示(tooltip)放在它们的触发元素后面。您可以有以下两种方式添加工具提示(tooltip):

1、通过 data 属性:如需添加一个工具提示(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为工具提示(tooltip)的文本。默认情况下,插件把工具提示(tooltip)设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2、通过 JavaScript:通过 JavaScript 触发工具提示(tooltip):

$('#identifier').tooltip(options)

工具提示(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的工具提示(tooltip):

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

二、选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

Bootstrap每天必学之工具提示(Tooltip)插件

三.工具提示

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

工具提示有很多属性来配置提示的显示,具体如下:

Bootstrap每天必学之工具提示(Tooltip)插件

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>
 

JavaScript 方式直接去掉前面的 data 即可。包括:animation、html、placement、selector、original-title、title、trigger、delay、container 和 template 等属性。

//JavaScript 方式

$('#section a').tooltip({
 delay : {
 show : 500,
 hide : 100,
 },
 container : 'body'
});

JavaScript 有四个方法:show、hide、toggle 和 destroy 四种。

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

Tooltip 中事件有四种。

Bootstrap每天必学之工具提示(Tooltip)插件

//事件,其他雷同

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发!');
});

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
jQuery 中的 DOM 操作
Apr 26 #Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 #Javascript
You might like
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
小议Javascript中的this指针
2010/03/18 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Django框架 querySet功能解析
2019/09/04 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python实现三种随机请求头方式
2021/01/05 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
妇产医师自荐信
2014/01/29 职场文书
会计系毕业生求职信
2014/05/28 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏