8.6.2 工具提示支持的属性

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

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()方法时可传入如下参数。

  1. 字符串参数
  2. JS对象参数

字符串参数

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

JS对象参数

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

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

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