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

用法

提示工具(Tooltip)插件根据要求生成内容和标记，默认情况是把提示工具放在它们触发元素的后面，您可以有以下两种方式来添加提示工具。

1、通过data属性，如需要添加一个提示工具，只需要向一个锚链标签添加data-toggle="tooltip"即可。锚的title即为提示工具(tooltip)的文本，默认情况下，插件把提示工具(tooltip)设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：提示工具(Tooltip)插件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:20px">
<h3>提示工具(Tooltip)插件-锚</h3>
这是一个<a href="#" data-toggle="tooltip" title="默认的Tooltip" class="tooltip-test">默认的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="left" title="左则的Tooltip" class="tooltip-test">左则的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="right" title="右则的Tootip" class="tooltip-test">右则的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的Tooltip" class="tooltip-test">底部的Tooltip</a>.
这是一个<a href="#"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip"class="tooltip-test">顶部的Tooltip</a>.
<h3>提示工具(Tooltip)插件-按钮</h3>
<button type="button" class="btn btn-default"data-toggle="tooltip"title="默认的Tooltip">默认的Tooltip</button>
<button type="button"class="btn btn-success"data-toggle="tooltip"data-placement="left"title="左则的Tooltip">左则的Tooltip</button>
<button type="button"class="btn btn-primary"data-toggle="tooltip"data-placement="right"title="右则的Tootip">右则的Tootip</button>
<button type="button" class="btn btn-warning"data-toggle="tooltip"data-placement="bottom"title="底部的Tooltip">底部的Tooltip</button>
<button type="button"class="btn btn-info"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip">顶部的Tooltip</button>

</div>
<script>
$(document).ready(function () {
$("[data-toggle='tooltip']").tooltip();
})
</script>
</body>
</html>

												


											
Bootstrap 提示工具(Tooltip)插件的更多相关文章
	

    
						
  1. Bootstrap 提示工具(Tooltip)插件的事件
		
    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...
    
		
    2. 
						
  2. Bootstrap 提示工具(Tooltip)插件方法的用法
		
    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...
    
		
    3. 
								
  3. Bootstrap 提示工具（Tooltip）插件
		
    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...
    
		
    4. 
						
  4. CSS 提示工具(Tooltip)
		
    CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...
    
		
    5. 
						
  5. CSS：CSS 提示工具(Tooltip)
		
    ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...
    
		
    6. 
						
  6. Bootstrap-Plugin：提示工具（Tooltip）插件
		
    ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...
    
		
    7. 
						
  7. bootstrap 支持的JavaScript插件
		
    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...
    
		
    8. 
						
  8. BootStrap之 提示工具（Tooltip）插件
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    9. 
						
  9. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
		
    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python dict操作
			
    d1 = {'one': 1, 'two': 2} d2 = {'one': 1, 'two': 2} d3 = {'one': 1, 'two': 2} print(dir(d1)) # 1.con ...
    
			
    2. 
						
  2. 洛谷P2899 [USACO08JAN]手机网络Cell Phone Network
			
    P2899 [USACO08JAN]手机网络Cell Phone Network 题目描述 Farmer John has decided to give each of his cows a cel ...
    
			
    3. 
						
  3. [Xcode 实际操作]七、文件与数据-(9)编码创建Plist文件(属性列表文件)
			
    目录:[Swift]Xcode实际操作 本文将演示如何通过编码的方式,创建属性列表文件. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit  ...
    
			
    4. 
						
  4. JAVA之动态编译
			
    通过Java动态生成class文件 今天说下JAVA中的动态编译,这个功能根据我现在的了解好像没有见到过用的,我Jio的吧,现在的一些在线代码编缉器可以用到了,这个具体我也不是很清楚.感兴趣的大家可以 ...
    
			
    5. 
						
  5. 1366 - Incorrect string value:'\xE5\xBC\xA0\xE4\xB8\x89' for column 'name' a 错误修改
			
    把name的字符集修改成 utf8 ,然后把表关了从新打开,就可以了 如果还不行,就从新创表,在创表的时候修改name的字符集 如果还不行,就修改my.ini 它在你的mysql安装路径里 [mysq ...
    
			
    6. 
						
  6. Ubuntu上源码安装golang并设置开发环境
			
    安装go #wget https://dl.google.com/go/go1.10.3.linux-amd64.tar.gz #tar -xzf go1.10.3.linux-amd64.tar.g ...
    
			
    7. 
						
  7. 修改Tomcat和Jetty默认JDK
			
    tomcat: sed -i 's/java-7-oracle/java-8-oracle/g' /etc/init.d/tomcat7 Jetty echo 'JAVA_HOME=/usr/lib/ ...
    
			
    8. 
						
  8. ADC中的滤波算法
			
    STM32的AD最大输入时钟不超过14MHZ,最高采样速度1us,可以采用DMA或者内部的基本定时器/高级定时器来触发,利用模拟看门狗监控所选择的的所有通道,如果超过模拟的 阀[fá] 值,将产生中断 ...
    
			
    9. 
						
  9. HDU 1176   免费馅饼 矩阵取数， dp + 滚动数组
			
    http://acm.hdu.edu.cn/showproblem.php?pid=1176 首先可以处理出整张地图的状态. book[T][POS]表示第T秒,在第pos个地方有多少个馅饼. dp[ ...
    
			
    10. 
						
  10. 如何在windows下是用mysqldumpslow命令
			
    1. 再一次点击mysql安装文件(默认是没安装mysqldumpslow这些脚本的),如图: 点击next如下图 点击Developer Components 旁边的选择this feature , ...
    
			
    11.