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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
js图片上传的封装代码
Aug 01 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 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提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中global用法实例分析
2015/04/30 Python
python中类的属性和方法介绍
2018/11/27 Python
Python读取表格类型文件代码实例
2020/02/17 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
python文件路径操作方法总结
2020/12/21 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
母亲80寿诞答谢词
2014/01/16 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
协议书怎么写
2014/04/21 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
小学教学工作总结2015
2015/05/13 职场文书
工作证明书
2015/06/15 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python