Bootstrap3 工具提示插件的选项

工具提示插件的选项

Bootstrap为工具提示插件提供了 10 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑5：

表 4‑5 tooltip插件的选项
名称	类型	默认值	说明
animation	boolean	true	为工具提示应用CSS淡入淡出过渡效果
container	string \| false	false	将提示条附加到特定元素，如 container: 'body'
delay	number \| object	0	延迟显示和隐藏提示条的时间（毫秒）——手动触发提示条时无效如果只指定一个数值，则隐藏和显示都使用该数值。对象的结构为 delay: { show: 500, hide: 100 }
html	boolean	false	提示条支持插入 HTML。如果取值为 false，则使用 jQuery 的 text 方法插入文本。如果担心XSS攻击，那就使用文本
placement	string \| function	'top'	设置提示条的位置，取值：top \| bottom \| left \| right
selector	string	false	如果提供了选择器，在触发该选择器时才显示提示信息
template	string	[1]	使用HTML面板创建工具提示。工具提示的title将被注入到.tooltip-inner中。.tooltip-arrow成为工具提示的箭头。最外层的包装元素应该拥有.tooltip类
title	string \| function	''	如果title属性不存在，则使用默认值 ''
trigger	string	'hover focus'	工具提示的触发方式：click \| hover \| focus \| manual。可以传入多个触发方式，以空格分隔。manual不能与其他触发方式组合使用
viewport	string \| object \| function	{ selector: 'body', padding: 0 }	使工具提示始终在元素的边界之内。

[1] '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

使用选项时，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>

运行效果如图 4‑7所示：

图4-7 自定义工具提示选项

关于作者

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

Bootstrap3 工具提示插件的选项相关推荐

Bootstrap3 工具提示插件的使用方法
工具提示当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能. HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏 ...
Bootstrap3轮番插件的选项
轮番插件的选项 Bootstrap为轮番插件提供了 4 个选项,这些选项都可以通过 data 属性或JavaScript进行设置.选项的详细说明见表 4‑11: 表 4‑11 carousel插件的选 ...
Bootstrap3 折叠插件的选项
折叠插件的选项 Bootstrap为折叠插件提供了 2 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 4‑9. 表 4‑9 collapse插件的选项名称类型 ...
Bootstrap3 工具提示插件的事件
工具提示插件的事件 Bootstrap为工具提示插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑6. 表 4‑6 tooltip插件的事件及含义 ...
Bootstrap3 工具提示插件的方法
工具提示插件的方法 1..tooltip(options) 使用一个可选的对象参数 options调用某个页面元素的工具提示.如: $('#element').tooltip ({ placeme ...
Bootstrap3 弹出提示插件的选项
弹出提示插件的选项 Bootstrap为工具提示插件提供了 11 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.这些选项详细见表 4‑7: 表 4‑7 popover插件 ...
Bootstrap3 滚动监听插件的选项
滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...
Bootstrap3 插件的选项
插件的选项为了对插件提供更多的控制,Bootstrap为插件提供了一些选项.所有的插件的所有选项都可以通过 data 属性或JavaScript进行设置. 如果使用 data 属性,则要将选项名称放 ...
Bootstrap 工具提示插件Tooltip 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑4: 表 5‑4 tooltip插件的选项名称类型默认值 ...

Bootstrap3 工具提示插件的选项

工具提示插件的选项

Bootstrap3 工具提示插件的选项相关推荐

最新文章

热门文章