8.6.2 工具提示支持的属性
- 设置在要显示提示信息的标签上属性
- tooltip方法支持的参数
  - 字符串参数
  - JS对象参数

8.6.2 工具提示支持的属性

设置在要显示提示信息的标签上属性

当使用data-*属性定义工具提示时,Bootstrap除了提供了data-toggle、data-placenment属性之外,Bootstrap还为工具提示提供了其他大量支持属性,下面属性设置在要显示提示信息的标签上,如设置在<a>元素,或<button>元素上

属性	描述
`data-animation`	`boolean`属性,用于指定是否对工具提示应用`.fade`过渡效果。
`data-container`	指定`将工具提示附加到特定元素上`,该属性支持各种选择器或`false`值,`false`值表示不附加。比如`container: 'body'`表明将工具提示附加到页面`<body>`元素上。
`data-delay`	指定`延迟多少毫秒`来显示或关闭工具提示;该属性支持简单数值或形如`{'show':500,'hide':200}`的对象,该对象指定延迟500 ms显示工具提示,延迟200 ms关闭工具提示。
`data-html`	指定是否将`HTML`代码直接转换为工具提示。该属性默认为`false`,`Bootstrap`先使用`text()`方法处理工具提示内容,然后再添加工具提示。
`data-placement`	指定工具提示的出现位置。该属性的默认值是`'top'`。
`data-selector`	如果指定了该属性,那么工具提示将会由该属性表示的`HTML`元素负责代理。
`data-template`	指定工具提示的`HTML`模板,该属性的默认值是`Bootstrap`提供的`HTML`模板。
`data-title`	设置默认的工具提示内容。当`title`属性不存在或属性值为空时,该属性才会发挥作用。
`data-trigger`	设置触发工具提示的方法,可选值为`click`,`hover`,`focus`,`manual`,该属性的默认值是`hover`。这意味着只要鼠标悬停就会触发工具提示。该属性还支持多个属性值的组合。比如`click

tooltip方法支持的参数

使用JS激活工具提示要调用工具提示的tooltip()方法,调用tooltip()方法时可传入如下参数。

字符串参数
JS对象参数

字符串参数

该字符串参数支持'show'、'hide'、'toggle'和'destroy'等字符串,分别表示显示工具提示、隐藏工具提示、切换工具提示的显示/隐藏状态、销毁工具提示。如果调用tooltip()方法时传入了'destroy'字符串,那就意味着要销毁该工具提示,因此页面以后再也不会显示该工具提示。

JS对象参数

该JS对象支持上面介绍的以data-开头的各种选择,只是无须使用data-前缀。例如如下代码。

$(function () {
	// 提示信息需要使用如下js代码来开启
	$("[data-toggle='tooltip']").tooltip({ 
		placement: 'right',
		delay: 200
	});
});

上面代码在调用tooltip()方法时传入了一个JS对象,该对象指定了placement为right,这意味着所有工具提示都会出现在链接或按钮的右边;此外该JS对象还指定了delay为200,这意味着延迟200毫秒才会显示、隐藏工具提示。

原文链接: 8.6.2 工具提示支持的属性