W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap JS 提示框



JS 提示框 (tooltip.js)

Tooltip插件是一个小的弹出框,当用户将鼠标指针移到元素上时出现。

有关Tooltips的教程,请阅读我们的 Bootstrap Tooltip教程


通过 data-*属性 触发

data-toggle="tooltip" 可以激活一个提示框。

锚的 title 即为提示工具(tooltip)的文本

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 测 试

通过 JavaScript 触发

提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip):

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
测 试

选项

有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

名称 类型 默认值 描述 测 试
animation boolean true

提示工具使用 CSS 渐变滤镜效果

  • true - Add a fading effect
  • false - Do not add a fading effect
测 试
container string, or the boolean false false 将工具提示附加到特定元素。
Example: container: 'body'
测 试
delay number, or object 0 指定显示和隐藏所需的毫秒数 工具提示。 测 试
html boolean  false 向提示工具插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text 测 试
placement string "top" 规定如何定位提示工具(即 top|bottom|left|right|auto)

  • "top" - Tooltip on top
  • "bottom" - Tooltip on bottom
  • "left" - Tooltip on left
  • "right" - Tooltip on right
  • "auto" - 当指定为 auto 时,会动态调整提示工具。例如,如果 placement 是 "auto left",提示工具将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
测 试
selector string, or the boolean false false 如果提供了一个选择器,提示工具对象将被委派到指定的目标 测 试
template string   创建工具提示时要使用的基本HTML。
title string "" 如果未指定 title 属性,则 title 选项是默认的 title 值 测 试
trigger string "hover focus" 定义如何触发提示工具: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。 Tip: To pass multiple values, separate them with a space 测 试
viewport string, or object {selector: "body", padding: 0} 将工具提示保持在此元素的边界内。

方法

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

方法 描述 实例
.tooltip(options) 向元素集合附加提示工具句柄 测 试
.tooltip("show") 显示元素的提示工具 测 试
.tooltip("hide") 隐藏元素的提示工具 测 试
.tooltip("toggle") 切换显示/隐藏元素的提示工具 测 试
.tooltip("destroy") 隐藏并销毁元素的提示工具 测 试

事件

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

事件 描述 实例
show.bs.tooltip 当调用 show 实例方法时立即触发该事件 测 试
shown.bs.tooltip 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成) 测 试
hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件 测 试
hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成) 测 试

Examples

更多实例

自定义提示框

使用CSS自定义工具提示的外观:

Example

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
尝试一下 »