Bootstrap 弹出提示插件Popover 的选项

选项

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

表 5‑5 popover插件的选项

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

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

1. $('#example').popover(options)

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

1. <a href="#">美女</a>

1. <script>
2. $('a').popover ({
3.   html: true,
4.   title: '<img src="beauty.jpg" />',
5.   placement: 'right',
6.   delay: { show: 500, hide: 100 }
7. });
8. </script>

运行效果如图 5‑10所示：

图5-10 Bootstrap弹出提示插件popover的选项

关于作者

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