<!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）插件的更多相关文章

  1. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

  2. Bootstrap 提示工具(Tooltip)插件方法的用法

    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...

  3. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  4. CSS 提示工具(Tooltip)

    CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...

  5. CSS：CSS 提示工具(Tooltip)

    ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...

  6. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  7. Bootstrap 提示工具（Tooltip）插件

    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...

  8. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  9. Bootstrap-Plugin：提示工具（Tooltip）插件

    ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...

随机推荐

  1. kodexplorer免费网盘安装教程

    KodExplorer是什么? KodExplorer可道云,原名芒果云,是基于Web技术的私有云和在线文件管理系统. 用户只需通过简单环境搭建,即可使用KodExplorer快速完成私有云/私有网盘 ...

  2. 4.28Linux(6)

    2019-4-28 21:27:41 明天回家.回家继续学Linux还好有个服务器!!!感觉有个属于自己的服务器感觉好爽啊!! 越努力越幸运!永远不要高估自己!!! Nginx安装 服务器的请求原理 ...

  3. Markdown基础语法笔记

    # 一级标题## 二级标题### 三级标题###### #号之后记得加一个空格 仅支持1-6级标题  ### 列表 - 文本1 - 文本2 - 文本3+ 列表2* 列表2 ### 有序列表1. 有序文 ...

  4. Java语法细节 - 内存和枚举

    目录 Java申请DirectBuffer ByteBuffer的position,limit,capacity,flip操作之间的关系 枚举实现单例模式 Java申请DirectBuffer /*- ...

  5. 获取用户在web页面上选中的文本

    window.getSelection().toString();

  6. pytorch可视化工具visdom

    visdom的github repo: https://github.com/facebookresearch/visdom 知乎一个教程:https://zhuanlan.zhihu.com/p/3 ...

  7. C# CreateParams的使用（解决闪屏问题）

    <转载自:https://blog.csdn.net/xpwang/article/details/53427479> 窗体和控件的属性CreateParams(这真的是一个属性)很神奇, ...

  8. 微信报错 config:fail.Error:invalid signature

    config:fail.Error:invalid signature 微信公众号报这个错,appid等各项都配置好,经过一番折腾,发现原来ip白明单设置了不是该服务器的ID,重新设置后就可以了

  9. 查询Python版本

  10. Mysql索引最左匹配原则

    先来看个例子: 1. 示例1:假设有如下的一张表: DROP TABLE IF EXISTS testTable; CREATE TABLE testTable ( ID BIGINT NOT NUL ...