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 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
JavaScript 是什么意思
Sep 22 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
用文本作数据处理
2006/10/09 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php依赖注入知识点详解
2019/09/23 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
使用Python处理BAM的方法
2018/09/28 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
车间操作工岗位职责
2013/12/19 职场文书
大型会议接待方案
2014/03/01 职场文书
大学生村官承诺书
2014/03/28 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
初三英语教学计划
2015/01/23 职场文书
检讨书格式范文
2015/05/07 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript
python识别围棋定位棋盘位置
2021/07/26 Python