【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
文章转载自 [http://www.php230.com]
链接地址
Bootstrap 工具提示(Tooltip)插件
当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。
如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
用法
工具提示(Tooltip)插件根据需求生成内容和标记,默认情况下是把工具提示(tooltip)放在它们的触发元素后面。您可以有以下两种方式添加工具提示(tooltip):
- 通过 data 属性:如需添加一个工具提示(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为工具提示(tooltip)的文本。默认情况下,插件把工具提示(tooltip)设置在顶部。
<a rel="nofollow" href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
- 通过 JavaScript:通过 JavaScript 触发工具提示(tooltip):
$('#identifier').tooltip(options)
工具提示(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的工具提示(tooltip):
$(function () { $("[data-toggle='tooltip']").tooltip(); });
实例
下面的实例演示了通过 data 属性使用工具提示(Tooltip)插件的用法。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 工具提示(Tooltip)插件</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><h4>工具提示(Tooltip)插件 - 锚</h4> 这是一个 <a rel="nofollow" href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip </a>. 这是一个 <a rel="nofollow" href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip </a>. 这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip </a>. 这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip </a>. 这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip </a><br><h4>工具提示(Tooltip)插件 - 按钮</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip </button> <script>$(function () { $("[data-toggle='tooltip']").tooltip(); }); </script></body> </html>
尝试一下 »
结果如下所示:
选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
animation |
boolean 默认值:true |
data-animation | 工具提示使用 CSS 渐变滤镜效果。 |
html |
boolean 默认值:false |
data-html | 向工具提示插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。 |
placement |
string|function 默认值:top |
data-placement |
规定如何定位工具提示(即 top|bottom|left|right|auto)。 当指定为 auto 时,会动态调整工具提示。例如,如果 placement 是 "auto left",工具提示将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。 |
selector |
string 默认值:false |
data-selector | 如果提供了一个选择器,工具提示对象将被委派到指定的目标。 |
title |
string | function 默认值:'' |
data-title | 如果未指定 title 属性,则 title 选项是默认的 title 值。 |
trigger |
string 默认值:'hover focus' |
data-trigger | 定义如何触发工具提示: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。 |
content |
string | function 默认值:'' |
data-content | 如果未指定 data-content 属性,则使用默认的 content 值。 |
delay |
number | object 默认值:0 |
data-delay |
延迟显示和隐藏工具提示的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay: { show: 500, hide: 100 } |
container |
string | false 默认值:false |
data-container |
向指定元素追加工具提示。 实例: container: 'body' |
方法
下面是一些工具提示(Tooltip)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
Options: .tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
Toggle: .tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle') |
Show: .tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show') |
Hide: .tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide') |
Destroy: .tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy') |
实例
下面的实例演示了工具提示(Tooltip)插件方法的用法。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 工具提示(Tooltip)插件方法</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><div style="padding: 100px 100px 10px;">这是一个 <a rel="nofollow" href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.<br><br><br><br><br><br><p class="tooltip-options" >这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" title="<h2>'am Header2</h2>">Tooltip 方法 options</a>.</p><script>$(function () { $('.tooltip-show').tooltip('show');});$(function () { $('.tooltip-hide').tooltip('hide');});$(function () { $('.tooltip-destroy').tooltip('destroy');});$(function () { $('.tooltip-toggle').tooltip('toggle');});$(function () { $(".tooltip-options a").tooltip({html : true });});</script> <div></body> </html>
尝试一下 »
结果如下所示:
事件
下表列出了工具提示(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 |
$('#myTooltip').on('show.bs.tooltip', function () {// 执行一些动作... }) |
shown.bs.tooltip | 当工具提示对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 |
$('#myTooltip').on('shown.bs.tooltip', function () {// 执行一些动作... }) |
hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 |
$('#myTooltip').on('hide.bs.tooltip', function () {// 执行一些动作... }) |
hidden.bs.tooltip | 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {// 执行一些动作... }) |
实例
下面的实例演示了工具提示(Tooltip)插件事件的用法。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 工具提示(Tooltip)插件事件</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><h4>工具提示(Tooltip)插件 - 锚</h4> 这是一个 <a rel="nofollow" href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip </a>.<script> $(function () { $('.tooltip-show').tooltip('show');}); $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {alert("Alert message on show"); })}); </script></body> </html>
尝试一下 »
结果如下所示:
本文转载自: w3cschool
【bootstrap教程】Bootstrap 工具提示(Tooltip)插件相关推荐
- html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip)
提示冒泡(Tooltip) 使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,用于本地标题存储的动画和数据属性. 概览 使用提示冒泡持件时应了解以下:Tool ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- Bootstrap进阶四:jQuery插件详解
一.模态对话框(Modal) 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框, ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
- Bootstrap教程
Bootstrap教程 容器: 1.流体容器 class="container-fluid" 2.固定容器 class="container" 阈值 wid ...
- Bootstrap FileInput 图片上传插件
最近找了一个比较好用的图片和文件上传插件,Bootstrap-file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,无论是aspx.net 还是MVC.ne ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- Bootstrap 教程第四课:制作一组功能图标按钮
上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮( Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作. 我们以 ...
- python3flask教程_Python3 Flask bootstrap教程(1)
1.安装Flask 2.安装bootstrap 3.HelloWord 安装Flask 我用的py3,所以安装命令是: pip3 install Flask,安装之后,在Pycharm里边看到是这样子 ...
最新文章
- Dell R410/710 升级网卡驱动
- 【基础】利用thrift实现一个非阻塞带有回调机制的客户端
- ionic tab导航在android 顶部解决方案
- JZOJ 1277. 最高的奶牛
- 正整数 java_JAVA语言:正整数A+B(Java)PAT团体程序设计题解
- r.java没有生成_R.java 常见问题(R.java文件没有生成 )
- Java中注释的使用
- sublime----------快捷键的记录
- Excel的Sumif、Sumifs求和结果错误
- 上座部佛教的佛陀略传
- 教你电脑微信多开方法,超级简单_多啦咪
- 《天长地久》写照真实生活为何被影迷埋没不被欣赏
- PV、UV、CTR含义
- SSH的远程访问及控制
- 热招 | 我们是 Towhee 产研团队
- 算法模型评价详解:confusion matrix Accuracy Precision Recall F1 调和平均 加权F1 Micro-F1 Macro-F1 PRC ROC AUC
- JavaSE(二)-抽象类
- oracle添加序列
- 解析法实现多元线性回归的实例
- Android才是游戏开发者的乐土
热门文章
- java socket 拒绝链接_ConnectException:连接被拒绝
- 网站设计开发的步骤和方法!
- DNS污染——domain name的解析被劫持了返回无效的ip
- 用HTML/CSS制作个人简历
- C语言温度转换窗体,C语言1_1:温度转换
- 选择那个汇编编译器,和如何编译16位dos和32位汇编程序。
- 电子书 http://my.unix-center.net/~Simon_fu/?page_id=724
- 图说不为人知的IT传奇故事-3-硅谷DNA创造者HP
- 程序员数字_作为社会科学程序员处理不同的数字数据
- 卡耐基.梅隆教授兰迪.波许的最后一课经典稿