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 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）插件的用法。

实例

<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>

Bootstrap中tooltip插件使用 | 爱骇客相关推荐

Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
网站如何引入外部字体 [可自定义]/个人博客/爱骇客
很多人都知道,默认的微软雅黑是不可以商用的企业做站有时候会考虑到这点,昨天百度了下,看到说思源黑体阔以,总之不涉及侵权就ok了,网站引入外部字体自定义见下图. 关于思源黑体思源黑体是Adobe与Go ...
bootstrap中jquery插件——collapse折叠效果-手风琴效果
先来掌握collapse插件的基本用法,再慢慢深入实例. collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下: <a class="btn b ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
egg 编码规范_从 Egg.js 到 NestJS，爱码客后端选型之路
序爱码客3.0 开始开发到现在已经过去快整整一年了,虽然我投入其中的时间只有短短4个月,但是在最初后端几乎只有我一个人投入的情况下,可以说也是研究了一些东西,蹚了二三次浑水,来来回回改过五六次结构, ...
Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
iOS开发常用三方库、插件、知名博客
TimLiu-iOS iOS开发常用三方库.插件.知名博客等等,期待大家和我们一起共同维护,同时也期望大家随时能提出宝贵的意见(直接提交Issues即可). 持续更新... 版本:Objective- ...
Bootstrap 中使用Tooltips（不生效）
首先:去官网引入相关文件:(点击即可以进入并下载文件) 可以先检查一下是否正确引入了Bootstrap的JavaScript文件,若引入正确可以尝试更新Bootstrap版本或者在代码中手动调用too ...
egg extend ts_从 Egg.js 到 NestJS，爱码客后端选型之路
序爱码客3.0 开始开发到现在已经过去快整整一年了,虽然我投入其中的时间只有短短4个月,但是在最初后端几乎只有我一个人投入的情况下,可以说也是研究了一些东西,蹚了二三次浑水,来来回回改过五六次结构, ...

Bootstrap中tooltip插件使用 | 爱骇客

用法

实例

实例

Bootstrap中tooltip插件使用 | 爱骇客相关推荐

最新文章

热门文章