<!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. HTML入门14

    HTML表单 这块部分开始强调表单也是用的比较多的部分,好好补漏啊啊啊啊 表单用来做交互,处理所有方面结构到样式,到自定义小部件. form元素,严禁嵌套表单,表单嵌套会使得表单得行为不可预知,引入f ...

  2. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  3. 【安富莱】【RL-TCPnet网络教程】第11章 RL-TCPnet调试方法

    第11章      RL-TCPnet调试方法 本章节为大家讲解RL-TCPnet的调试方法,RL-TCPnet的调试功能其实就是通过串口打印实时监控运行状态.而且RL-TCPnet的调试设置比较简单 ...

  4. [Swift]LeetCode699. 掉落的方块 | Falling Squares

    On an infinite number line (x-axis), we drop given squares in the order they are given. The i-th squ ...

  5. Kubernetes系列之监控Metres-server实战篇

    本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics AP ...

  6. Integer简介

    // 当创建范围为[-128,127]时 Integer a = ; Integer b = ; Integer c = ); System.out.println("a == b :&qu ...

  7. Cassandra如何利用线性一致性来实现轻量级的事务

    分布式数据库会面临着一个独特的挑战,就是数据必须要严格的按照读,写顺序执行.如创建用户,转账,两个潜在的写操作竞态条件必须要确保一个写操作必须在另外一个之前发生.在Cassandra中,使用Paxos ...

  8. 使用C# (.NET Core) 实现抽象工厂设计模式 (Abstract Pattern)

    本文的概念性内容来自深入浅出设计模式一书. 上一篇文章讲了简单工厂和工厂方法设计模式 http://www.cnblogs.com/cgzl/p/8760250.html, 使用的是披萨店的例子. 文 ...

  9. 微信小程序开发测试

    微信小程序 在2017-01-09正式上线,本着跟上时代潮流的精神,写一份教程来看看 微信IDE下载地址为: 微信IDE 在windows下直接 双击 exe安装即可,安装完成后的界面如下: 得到这个 ...

  10. Python内置函数(49)——pow

    英文文档: pow(x, y[, z]) Return x to the power y; if z is present, return x to the power y, modulo z (co ...