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

更新时间：2016年12月28日 16:47:41 投稿：lijiao

这篇文章主要为大家详细介绍了bootstrap提示标签、提示框的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

首先聊一聊提示标签：

<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>

效果：

下面讲一讲提示框：

<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>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript Spread Syntax (...）的十种使用方法
这篇文章主要介绍了JavaScript Spread Syntax (...）的十个强大用途，扩展语法即Spread Syntax(…) 是 ES6 中引入的一个新特性，它允许我们从可迭代对象中快速提取元素
2022-07-07
JS getStyle获取最终样式函数代码
定义一个id="flower"的div元素并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
2010-04-04
JavaScript如何判断对象有某属性
这篇文章主要介绍了JavaScript如何判断对象有某属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
JavaScript数组去重的3种方法和代码实例
这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下
2015-07-07
extjs 04_grid 单击事件新发现
EXTJS GRID 中单击行和单元格获得行或者单元格的内容(数据),本文将整理此功能的应用，需要了解的朋友可以参考下
2012-11-11
微信小程序实现单个或多个倒计时功能
这篇文章主要为大家详细介绍了微信小程序实现单个或多个倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JS实现中文汉字按拼音排序的方法
这篇文章主要介绍了JS实现中文汉字按拼音排序的方法,涉及javascript针对中文字符串的转换、遍历、排序等相关操作技巧,需要的朋友可以参考下
2017-10-10
JS实现的新浪微博大厅文字内容滚动效果代码
这篇文章主要介绍了JS实现的新浪微博大厅文字内容滚动效果代码,可实现页面图文元素定时滚动的效果,涉及JavaScript时间函数定时改变页面元素的相关技巧,需要的朋友可以参考下
2015-11-11
使用contextMenu插件实现Bootstrap table弹出右键菜单
如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中，其中“开发高效，设备兼容”的特点表现得非常明显。这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单,需要的朋友可以参考下
2017-02-02
JavaScript 解析数学表达式的过程详解
这篇文章主要介绍了JavaScript 解析数学表达式的过程详解,本文以一个的解题思路，来分享如何解决问题，解决的过程，可以作为解决工作中一般问题的通用思路，对js解析表达式相关知识感兴趣的朋友一起看看吧
2022-06-06