BootStrap之 提示工具(Tooltip)插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 工具提示(Tooltip)插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <h4>工具提示(Tooltip)插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
这是一个 <a 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(); }); //在使用这个插件前,需要先注册。注意 其中的data-toggle是可以修改的,但是 data-toggle="tooltip" 元素中属性必须与注册时的一致
</script> </body> </html>
元素配置三个必要属性 data-toggle="tooltip" 前面的属性和初始注册的值必须是一致的
data-placement="bottom" 表示提示框显示的位置
title="底部的 Tooltip" 提示框显示的内容,实际上只有这一个属性也会提示,但是效果不好,所以我们使用此插件来优化提示效果
可选属性 :
data-html="true" 当我们想在提示框里实现换行的时候,直接加 "...<br />" 是无效的,只需加上这个属性即可 参考资料:
http://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html ToolTip 使用方式
https://blog.csdn.net/liaobangxiang/article/details/80831919 ToolTip 提示换行及修改样式
BootStrap之 提示工具(Tooltip)插件的更多相关文章
- Bootstrap 提示工具(Tooltip)插件的事件
事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...
- Bootstrap 提示工具(Tooltip)插件方法的用法
方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...
- Bootstrap 提示工具(Tooltip)插件
当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...
- CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...
- CSS:CSS 提示工具(Tooltip)
ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- Bootstrap 提示工具(Tooltip)插件
一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap-Plugin:提示工具(Tooltip)插件
ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...
随机推荐
- dedecms给图片加水印覆盖整张图片
位置: /include/image.class.php $wmwidth = $imagewidth - $logowidth; $wmheight = $imageheight - $logohe ...
- 05 - json转成树状结构
var jsonData = eval(`[ {"id":"4","pid":"1","name": ...
- Lua学习----零碎知识点
Jit(just in time) 动态即时编译,边运行时边编译---->lua (主要是面向进程) Aot(ahead of time) 静态提前编译,运行前编译---->C#(主要是面 ...
- JS监听对象属性改变
设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三. 这就是个数据绑定的概念. 针对这类需求 ES5提供了Object.definePr ...
- 算法与数据结构(七) AOV网的拓扑排序(Swift版)
今天博客的内容依然与图有关,今天博客的主题是关于拓扑排序的.拓扑排序是基于AOV网的,关于AOV网的概念,我想引用下方这句话来介绍: AOV网:在现代化管理中,人们常用有向图来描述和分析一项工程的计划 ...
- 浅析HSTS
浅析HSTS 一.HSTS是什么? HSTS全称:HTTP Strict Transport Security,意译:HTTP严格传输安全,是一个Web安全策略机制. 二.HSTS解决什么问题? 它解 ...
- sweetalert提示框
文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...
- [Swift]LeetCode212. 单词搜索 II | Word Search II
Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...
- [Swift]LeetCode1031. 两个非重叠子数组的最大和 | Maximum Sum of Two Non-Overlapping Subarrays
Given an array A of non-negative integers, return the maximum sum of elements in two non-overlapping ...
- Python面试真题第四节
81.举例说明SQL注入和解决办法 82.s="info:xiaoZhang 33 shandong",用正则切分字符串输出['info', 'xiaoZhang', '33', ...