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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Vue 自定义指令功能完整实例
Sep 17 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
JavaScript实现登录窗体
Jun 22 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
php获取excel文件数据
2017/04/21 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
vue实现倒计时功能
2021/03/24 Vue.js
大学生创业计划书的用途
2014/01/08 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
书香校园活动方案
2014/02/28 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
物资采购管理制度
2015/08/06 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电