Bootstrap3 弹出提示插件的选项
弹出提示插件的选项
Bootstrap为工具提示插件提供了 11 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑7:
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
animation | boolean | true | 为工具提示应用CSS淡入淡出过渡效果 |
container | string | false | false | 将提示条附加到特定元素,如 container: 'body' |
content | string | function | '' | 如果data-content属性不存在,则使用这个默认值 |
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 } | 使工具提示始终在元素的边界之内。 |
使用选项时,JavaScript触发工具提示的格式为:
$('#example').popover(options)
其中,'#example' 为需要显示弹出提示的页面元素,options 为使用对象表示的的选项。如,以下代码表示,以HTML文本格式显示一幅图像作为工具提示,并延迟一秒显示、延迟半秒隐藏:
<a href="#">美女</a>
<script>
$('a').popover ({
html: true,
title: '<img src="beauty.jpg" />',
placement: 'right',
delay: { show: 500, hide: 100 }
});
</script>
运行效果如图 4‑10所示:
图4-10 自定义弹出提示选项
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 弹出提示插件的选项相关推荐
- Bootstrap3 弹出提示插件的方法
弹出提示插件的方法 1..popover (options) 使用一个可选的对象参数 options调用某个页面元素的弹出提示.如: $('#element').popover ({ placem ...
- Bootstrap3 弹出提示插件的使用方法
弹出提示 弹出提示(popover.js)是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展. 弹出框依赖于工具提示插件tooltip.js,如果你定制了 Bootst ...
- Bootstrap 弹出提示插件Popover 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑5: 表 5‑5 popover插件的选项 名称 类型 默认值 ...
- Bootstrap 弹出提示插件popover 的使用方法
弹出提示 弹出提示是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展. 弹出提示插件需要 bootstrap-popover.js 文件支持,在使用该插件之前,应该导入 ...
- Bootstrap 弹出提示插件Popover 的方法
方法 1..popover (options) 使用一个可选的对象参数 options调用某个页面元素的弹出提示.如: $('#element').popover ({ placement: ri ...
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
- messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件
插件描述:基于dialogbox1.0修改可自定义按钮及事件的弹出框插件,每个按钮可绑定单独的触发事件,并且能支持将弹出框作为一个表单来填入数据并获取 $('body').dialogbox({ ty ...
- qtreeview 点击二级节点弹出dialog_Flutter Toast、弹出提示、轻提示
主流的三种APP反馈形式: toast.snackbar以及dialog. toast通常用于提示用户一些不那么重要的信息, 会弹出并显示文字一段时间. 时间一到就会消失. 相较于snackbar和d ...
- div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
最新文章
- pyton BeautifulSoup中文API
- mysql5.6创建用户并授予指定数据库或表权限
- zTree的拖拽排序
- 根据录入的计算公式计算_工业铝型材承重计算
- 认识flex中的sprite
- c++学习笔记之基础篇
- Git - 版本控制工具十分钟入门手册
- 用户(三次)登录--作业小编完成
- 【SCOI2005】【BZOJ1087】互不侵犯King(状压dp)
- SpringBoot集成Editor.md 流程详细
- pycharm 运行后,如何查看变量值以及继续输入语句并运行?(非Debug , debug太慢)
- 不受支持的SQL类型1111
- java web/Maven项目结构分析
- oracle sql计算百分比,Oracle sql百分比问题 - oracle 使用笔记
- 面向对象的15位、18位中国大陆身份证号码解析、验证工具
- 辩证唯物主义和历史唯物主义思维导图 - 圣才
- Mongodb主从模式SECONDARY提升为PRIMARY
- 排序算法——鸽巢排序 Pigeonhole sort
- 用Python做股市数据分析(二)
- js实现文字转语音功能tts