Bootstrap2用户指南
5.7.2 选项
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

使用方法

选项

Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 5‑4:

表 5‑4 tooltip插件的选项
名称 类型 默认值 说明
animation boolean true 为工具提示应用CSS淡入淡出过渡效果
html boolean false 提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。如果担心XSS攻击,那就使用文本
placement string | function 'top' 设置提示条的位置,取值:top | bottom | left | right
selector string false 如果提供了选择器,在触发该选择器时才显示提示信息
trigger string 'hover focus' 设置如何触发提示条:click | hover | focus | manual。可以传入多个触发方式,以空格分隔
title string | function '' 如果title属性不存在,则使用默认值 ''
delay number | object 0 延迟显示和隐藏提示条的时间(毫秒)——手动触发提示条时无效如果只指定一个数值,则隐藏和显示都使用该数值。对象的结构为 delay: { show: 500, hide: 100 }
container string | false false 将提示条附加到特定元素,如 container: 'body'

使用选项时,JavaScript触发工具提示的格式为:

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

其中,'#example' 为需要显示工具提示的页面元素,options 为使用对象表示的的选项。如,以下代码表示,以HTML文本格式显示一幅图像作为工具提示,并延迟一秒显示、延迟半秒隐藏:

<a href="#">美女</a>
<script>
$('a').tooltip({
  html: true,
  title: '<img src="beauty.jpg" />',
  placement: 'bottom',
  delay: { show: 500, hide: 100 }
});
</script>

运行效果如图 5‑7所示:

Bootstrap工具提示插件Tooltip自定义选项
图5-7 Bootstrap工具提示插件Tooltip自定义选项

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验