Bootstrap3 工具提示插件的选项

工具提示插件的选项

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

表 4‑5 tooltip插件的选项
名称类型默认值说明
animationbooleantrue为工具提示应用CSS淡入淡出过渡效果
containerstring | falsefalse将提示条附加到特定元素,如 container: 'body'
delaynumber | object0延迟显示和隐藏提示条的时间(毫秒)——手动触发提示条时无效如果只指定一个数值,则隐藏和显示都使用该数值。

 

对象的结构为 delay: { show: 500, hide: 100 }

htmlbooleanfalse提示条支持插入 HTML。如果取值为 false,则使用 jQuery 的 text 方法插入文本。如果担心XSS攻击,那就使用文本
placementstring | function'top'设置提示条的位置,取值:top | bottom | left | right
selectorstringfalse如果提供了选择器,在触发该选择器时才显示提示信息
templatestring[1]使用HTML面板创建工具提示。工具提示的title将被注入到.tooltip-inner中。.tooltip-arrow成为工具提示的箭头。最外层的包装元素应该拥有.tooltip类

 

titlestring | function''如果title属性不存在,则使用默认值 ''
triggerstring'hover focus'工具提示的触发方式:click | hover | focus | manual。可以传入多个触发方式,以空格分隔。manual不能与其他触发方式组合使用
viewportstring | object | function{ selector: 'body', padding: 0 }使工具提示始终在元素的边界之内。

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

使用选项时,JavaScript使用以下语法格式来触发工具提示:

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

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

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

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

自定义工具提示选项

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

关于作者

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

ixygj197875

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者