编程 Javascript

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>

效果：

下面讲一讲提示框：

<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提示标签、提示框实现代码

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery 风格的HTML文本转义

Jul 01 Javascript

基于jQuery的获得各种控件Value的方法

Nov 19 Javascript

js实现点击后将文字或图片复制到剪贴板的方法

Aug 04 Javascript

jQuery实现列表自动滚动循环滚动展示新闻

Aug 22 Javascript

Textarea输入字数限制实例(兼容iOS&安卓)

Jul 06 Javascript

javascript与PHP动态往类中添加方法对比

Mar 21 Javascript

Vue.js更改调试地址端口号的实例

Sep 19 Javascript

JavaScript禁用右键单击优缺点分析

Jan 20 Javascript

VUE 实现复制内容到剪贴板的两种方法

Apr 24 Javascript

angularjs模态框的使用代码实例

Dec 20 Javascript

如何基于JavaScript判断图片是否加载完成

Dec 28 Javascript

关于Node.js中频繁修改代码重启服务器的问题

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