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 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js有关元素内容操作小结
Dec 20 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
js 调用百度分享功能
Feb 27 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
微信小程序实现吸顶效果
Jan 08 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js轮播图代码分享
2016/07/14 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python连接字符串的方法小结
2015/07/13 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python pip配置国内源的方法
2020/02/14 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Java面试笔试题大全
2016/11/23 面试题
体育教学随笔感言
2014/02/24 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2019个人半年工作总结
2019/06/21 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Redis Lua脚本实现ip限流示例
2022/07/15 Redis