Bootstrap 提示工具(Tooltip)插件

一、提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。

有以下两种方式添加提示工具(tooltip):

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

请悬停在我的上面

2、通过 JavaScript 触发提示工具(tooltip):

$('#identifier').tooltip(options)

二、基本的提示工具(Tooltip)示例:

html与js代码

提示工具(Tooltip)插件 - 锚

这是一个 默认的 Tooltip

提示工具(Tooltip)插件 - 按钮



	
		Bootstrap 提示工具(Tooltip)插件
		

		
		
		
	
	
	   

提示工具(Tooltip)插件 - 锚

这是一个 默认的 Tooltip

提示工具(Tooltip)插件 - 按钮

效果图

Bootstrap 提示工具(Tooltip)插件_第1张图片

三、

Bootstrap 提示工具(Tooltip)插件_第2张图片

下面是一些提示工具(Tooltip)插件中有用的方法:

Bootstrap 提示工具(Tooltip)插件_第3张图片

html代码

这是一个 Tooltip 方法 show .

			这是一个 Tooltip 方法 hide .

			这是一个 Tooltip 方法 destroy .

			这是一个 Tooltip 方法 toggle .
			
			

这是一个 Tooltip 方法 options .

js代码

效果图

Bootstrap 提示工具(Tooltip)插件_第4张图片

四、插入事件

下表列出了提示工具(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。

Bootstrap 提示工具(Tooltip)插件_第5张图片

这是一个 默认的 Tooltip.
		
效果图

Bootstrap 提示工具(Tooltip)插件_第6张图片





你可能感兴趣的:(Bootstrap)