Bootstrap学习js插件篇之提示框
案例
受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题。
将鼠标悬停到下面的链接上就可以看到工具提示了:
代码段:
- <script type="text/javascript">
- $(function() {
- $('.tooltip-demo').tooltip({
- selector: "[data-toggle=tooltip]",
- container: "body"
- })
- $("#testt").tooltip({})
- $('a').tooltip()
- })
- </script>
- <div class="bs-example tooltip-demo">
- <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh
- <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a>
- haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
- Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
- <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
- terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
- Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan
- <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>
- , scenester farm-to-table banksy Austin
- <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a>
- freegan cred raw denim single-origin coffee viral.
- </p>
- </div>
预览:
图片无法上传了。。。。。。。。我去去去去去去去。。。。。!!
四个展示方位
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们。
工具提示与按钮组和输入框组联合使用时需要一些特殊设置
在.btn-group
或 .input-group
内的元素上使用工具提示时,你需要指定container: 'body'
选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来
为了给disabled
或.disabled
元素添加工具提示,将需要增加工具提示的页面元素包裹在一个<div>
中,然后对这个<div>
元素应用工具提示。
用法
通过JavaScript激活工具提示:
$('#example').tooltip(options)
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top
by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-
之后,例如data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | apply a CSS fade transition to the tooltip |
html | boolean | false | Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
placement | string | function | 'top' | how to position the tooltip - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. |
selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. |
title | string | function | '' | default title value if title attribute isn't present |
trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
delay | number | object | 0 |
delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
container | string | false | false |
Appends the tooltip to a specific element. Example: |
对单个工具提示使用data属性
使用data属性可以为单个工具提示指定额外选项,如下所示。
标记
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
方法
$().tooltip(options)
为一组元素应用工具提示。
.tooltip('show')
展示工具提示。
$('#element').tooltip('show')
.tooltip('hide')
隐藏工具提示。
$('#element').tooltip('hide')
.tooltip('toggle')
展示或隐藏工具提示。
$('#element').tooltip('toggle')
.tooltip('destroy')
隐藏并销毁工具提示。
$('#element').tooltip('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip | 当show 方法被调用之后,此事件将被立即触发。 |
shown.bs.tooltip | 当工具提示展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.tooltip | 当hide 方法被调用之后,此事件被触发。 |
hidden.bs.tooltip | 当工具提示被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
Bootstrap学习js插件篇之提示框的更多相关文章
- Bootstrap学习js插件篇之标签页
简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- Bootstrap学习js插件篇之下拉菜单
案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 《玩转Bootstrap(JS插件篇)》笔记
导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...
- bootstrap学习——javascript插件篇
飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1. 引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...
- Bootstrap的js插件之弹出框(popover)
data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...
随机推荐
- Ubuntu16.04 下的网易云出现网络异常、无法播放,界面无响应问题的统一解决
能够在Linux系统下体验到原生界面的网易云音乐是件不错的事情,但是它总是经常性的出现网络异常,界面无响应的问题 为了听歌的体验,进行深入探究: 首先通过终端启用网易云音乐:sudo netease- ...
- rabbitmq学习(二) —— helloword!
rabbitmq学习当然是跟着官网走最好了,官网的教程写的很好,跟着官网教程走一遍就会有个初步了解了 下面的教程转自http://cmsblogs.com/?p=2768,该博客对官网的翻译还不错 介 ...
- CentOS通过光盘启动救援数据
(1).CentOS6 1)首先确保实体机有光盘,虚拟机有光盘镜像.并通过BIOS设置从光盘启动,实体机请通过提示进入BIOS,虚拟机请找到上方菜单中虚拟机-->电源-->打开电源时进入固 ...
- 深入理解python中的select模块
简介 Python中的select模块专注于I/O多路复用,提供了select poll epoll三个方法(其中后两个在Linux中可用,windows仅支持select),另外也提供了kque ...
- PHP cURL中CURLOPT_CONNECTTIMEOUT和CURLOPT_TIMEOUT的区别
CURLOPT_CONNECTTIMEOUT用来告诉PHP脚本在成功连接服务器前等待多久(连接成功之后就会开始缓冲输出),这个参数是为了应对目标服务器的过载,下线,或者崩溃等可能状况: CURLOPT ...
- SPOJ GSS
GSS1 题目大意:给出一个数列,多次询问区间最长连续子段和 题解:线段树维护区间最长连续子段和gss,区间从最左元素开始的最长连续子段和lgss 区间以最右元素为结尾的最长连续子段和rgss以及区间 ...
- php 安全模式限制函数
表 42-2. 安全模式限制函数 函数名 限制 dbmopen() 检查被操作的文件或目录是否与正在执行的脚本有相同的 UID(所有者). dbase_open() 检查被操作的文件或目录是否与正在执 ...
- 【转载】利用一个堆溢出漏洞实现 VMware 虚拟机逃逸
1. 介绍 2017年3月,长亭安全研究实验室(Chaitin Security Research Lab)参加了 Pwn2Own 黑客大赛,我作为团队的一员,一直专注于 VMware Worksta ...
- 【BZOJ-3110】K大数查询 整体二分 + 线段树
3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6265 Solved: 2060[Submit][Sta ...
- ESB的几个基本概念
京-星之泪: 请教一个问题:esb中路由和管道对的概念应该怎么理解,各自有什么用途,他们之间的关系 北京-kimmking: transport endpoint inbound outboun ...