bootstrap提示标签、提示框实现代码


Posted in Javascript onDecember 28, 2016

首先聊一聊提示标签:

<body>
<div class="container">
 <div class="row">
  <div class="col-lg-6">
   <p>
    <a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用来开发网站的">java</a>
    一种语言
   </p>
   <p>
    <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用来开发网站的">java</a>
    一种语言
   </p>
  </div>
  <div class="col-lg-6">
   <p>
    <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用来开发网站的">java</a>
    一种语言
   </p>
   <p>
    <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用来开发网站的">java</a>
    一种语言
   </p>
  </div>
 </div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
 //$('.tool').tooltip(); 
 $('.tool').tooltip('show'); 

 $('.tool').on('hidden.bs.tooltip', function () {
   alert('隐藏了');
 })
</script>
</body>

效果:

bootstrap提示标签、提示框实现代码bootstrap提示标签、提示框实现代码

下面讲一讲提示框:

<body>
<div class="container">
 <div class="row">
  <!--这边用的hover触发的-->
  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-delay='{"show": 1000, "hide": 1000 }' data-trigger="hover">Click to toggle popover</button>
 </div>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.btn').popover('show');
})
</script>
</body>

效果:

bootstrap提示标签、提示框实现代码

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

Javascript 相关文章推荐
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 #Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
You might like
php MySQL与分页效率
2008/06/04 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP函数积累总结
2019/03/19 PHP
php自动加载代码实例详解
2021/02/26 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python线程里哪种模块比较适合
2020/08/02 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
学期自我鉴定范文
2013/10/01 职场文书
给同学的道歉信
2014/01/16 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
给老师的一封建议书
2014/03/13 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
行政诉讼答辩状
2015/05/21 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL