<!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. ajax源代码

    //**********第一步, 获得一个xhr对象************* var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest if (windo ...

  2. 你不知道的JS之作用域和闭包（四）（声明）提升

    原文:你不知道的js系列 先有鸡还是先有蛋? 如下代码: a = 2; var a; console.log( a ); 很多开发者可能会认为结果会输出 undefined,因为 var a 在 a ...

  3. JAVA多线程学习笔记（1）

    JAVA多线程学习笔记(1) 由于笔者使用markdown格式书写,后续copy到blog可能存在格式不美观的问题,本文的.mk文件已经上传到个人的github,会进行同步更新.github传送门 一 ...

  4. 使用ANY和ALL条件

    在比较运算符中,可以出现ALL和ANY,表示“全部”和“任一”,但是ALL和ANY不能单独使用,需要配合单行比较操作符>.>=.<.<=一起使用.其中: > ANY : ...

  5. java:找出占用CPU资源最多的那个线程

    linux环境下,当发现java进程占用CPU资源很高,且又要想更进一步查出哪一个java线程占用了CPU资源时,按照以下步骤进行查找: 1.先用top命令找出占用资源厉害的java进程id,如: 2 ...

  6. es5中的for in 与es6中的for of的用法与区别

    for in 用与循环遍历对象中的属性键值 for of用于循环遍历出数组中的属性值 for in 也可以遍历数组,但是局限是他会把数组的其他属性键值也会遍历出,例如给数组添加一个属性arr.name ...

  7. ASP.NET Core知多少（6）：VS Code联调Angular + .NetCore

    ASP.NET Core知多少系列:总体介绍及目录 1. 引言 最近在看<程序员的成长课>,讲到程序员如何构建技能树,印象深刻.作为一名后台开发的程序员,深感技能单一,就别说技能树了.作为 ...

  8. Dora.Interception，为.NET Core度身打造的AOP框架 [2]：以约定的方式定义拦截器

    上一篇<更加简练的编程体验>提供了最新版本的Dora.Interception代码的AOP编程体验,接下来我们会这AOP框架的编程模式进行详细介绍,本篇文章着重关注的是拦截器的定义.采用“ ...

  9. 【安富莱专题教程第2期】uC/Probe简易使用说明，含MDK和IAR，支持F103，F407和F429开发板

    说明:1. 在uCOS工程调试时,这个软件还是非常给力的,方便查看各种信息,可以认为是MDK或者IAR调试功能的图形化版本,使用JLINK连接可以随时连接查看,无需目标端代码.2. 当前教程中,我们使 ...

  10. SVN和Git的功能和区别，尚学堂SVN和Git学习视频资料免费下载

    对于软件开发人员来说,版本控制系统再熟悉不过了,所谓版本控制系统就是软件项目开发过程中用于储存开发人员所写代码所有修订版本的软件.目前常见的版本控制系统分为集中式版本控制系统(SVN)和分布式版本控制 ...