<!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. 《SpringMVC从入门到放肆》十一、SpringMVC注解式开发处理器方法返回值

    上两篇我们对处理器方法的参数进行了分别讲解,今天来学习处理器方法的返回值. 一.返回ModelAndView 若处理器方法处理完后,需要跳转到其它资源,且又要在跳转资源之间传递数据,此时处理器方法返回 ...

  2. php调用c/c++时 passthru()被禁用问题

    passthru被禁用,需要编辑php.ini文件 disable_functions = scandir,passthru,exec,system,chroot,chgrp,chown,shell_ ...

  3. (BUG记录)记一次与其他系统交互协作时造成的锁表问题

    最近两日做公司电信某计费项目时,接收一个银行对账的任务,在完成对账后.电信和银行两方金额一致时需要进行充值.冲正操作保持金额一致.冲正服务是JAVA统一调用Tuxedo服务,这个服务已经是一个稳定可用 ...

  4. JS跨域两三事

    今日,前端开发要求新的Web服务需要支持跨域,因为要发起 Ajax 到后端web 服务域名请求数据: 前端application域名是 other.abc.com (举个栗子)  api接口域名是 a ...

  5. powerdesigner 不能自动生成注释的解决方法(三步解决)

    解决power designer 不能自动生成注释的解决办法只需要3步: 一.快捷键 Ctrl+Shift+X 打开脚本编辑器:(快捷键不能执行的话可以从这个路径执行:Tools --> Exc ...

  6. LeetCode题解38.Count and Say

    38. Count and Say The count-and-say sequence is the sequence of integers beginning as follows: 1, 11 ...

  7. 写给大忙人的centos下ftp服务器搭建（以及启动失败/XFTP客户端一直提示“用户身份验证失败”解决方法）

    注:个人对偏向于底层基本上拿来就用的应用,倾向于使用安装包,直接yum或者rpm安装:而对于应用层面控制较多或者需要大范围维护的,倾向于直接使用tar.gz版本. 对于linux下的ftp服务器,实际 ...

  8. [Swift]LeetCode540. 有序数组中的单一元素 | Single Element in a Sorted Array

    Given a sorted array consisting of only integers where every element appears twice except for one el ...

  9. [Swift]LeetCode965. 单值二叉树 | Univalued Binary Tree

    A binary tree is univalued if every node in the tree has the same value. Return true if and only if ...

  10. [Swift]LeetCode1006. 笨阶乘 | Clumsy Factorial

    Normally, the factorial of a positive integer n is the product of all positive integers less than or ...