Bootstrap基本插件学习笔记之Popover提示框(19)


Posted in Javascript onDecember 08, 2016

Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)? 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>Popover提示弹出框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>Popover提示弹出框</h1>
 </div>
 <div>
 <button type="button" class="btn btn-default" data-toggle="popover"
 data-placement="left" title="popover left" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-primary" data-toggle="popover"
 data-placement="right" title="popover right" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-danger" data-toggle="popover"
 data-placement="top" title="popover top" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-warning" data-toggle="popover"
 data-placement="bottom" title="popover bottom" data-content="测试">左边的按钮</button>
 </div>

</div>
<script>
 $(function () {
 $("[data-toggle='popover']").popover();
 })
</script>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之Popover提示框(19)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery实现放大镜特效
Oct 19 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
You might like
PHP入门学习笔记之一
2010/10/12 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python中二维阵列的变换实例
2014/10/09 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 初始化一个定长的数组实例
2019/12/02 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python decimal模块使用方法详解
2020/06/08 Python
浅谈Python中的继承
2020/06/19 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
社区敬老月活动实施方案
2014/02/17 职场文书
上课迟到检讨书
2015/05/06 职场文书
新闻稿标题
2015/07/18 职场文书
反邪教教育心得体会
2016/01/15 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书