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 相关文章推荐
jquery验证表单中的单选与多选实例
Aug 18 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Vue-Router模式和钩子的用法
Feb 28 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 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框架Phpbean说明
2008/01/10 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python3调用R的示例代码
2018/02/23 Python
python按照多个条件排序的方法
2019/02/08 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
关于运动会的稿件
2014/02/02 职场文书
文科生自我鉴定
2014/02/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
建筑安全标语
2014/06/07 职场文书
关爱空巢老人感想
2015/08/11 职场文书