提示标签：

<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-提示标签、提示框的更多相关文章

  1. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  4. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  5. Highcharts Pie 饼图提示标签IE下重叠解决方法，及json数据绑定方法

    一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...

  6. 关于eclipse使用thymeleaf时，提示标签不显示及后续问题的解方法

    因为thymeleaf 使用快捷键提示,不提示标签信息. 在使用网上说的的install new software安装插件的时候 报错: Unable to read repository at ht ...

  7. BarTender中每个标签提示手动输入的设置方法

    我们知道手动输入数据进行标签打印,可以利用BarTender中的数据输入表单来实现.表单的创建有利于提示程序员,输入要打印标签的的数据.如果手动输入数据的标签较多,可以设置表单提示为每个标签提示,减去 ...

  8. textarea标签提示录入剩余字数

    textarea标签提示录入剩余字数 <textarea onkeydown="checkMaxInput(this,300)" onkeyup="checkMax ...

  9. JSTL标签提示："items" does not support runtime expressions

    今天在使用JSTL的 c:forEach 标签时,jsp提示:"items" does not support runtime expressions,后来才发现是因为taglib ...

  10. bootstrap基本标签总结2

    [布局]bootstrap基本标签总结2   缩略图 <div class="container"> <div class="row"> ...

随机推荐

  1. your local repository contains non-ascii

    安装CCS时候遇到  your local repository contains non-ascii 问题. 解决方法:  不要在中文目录下安装.

  2. 1.3 PROGRAM DEVELOPMENT ENVIRONMENT

    1.3 PROGRAM DEVELOPMENT ENVIRONMENT 1.4 WIN32 EXECUTEABLE FILE FORMAT We should also know that compl ...

  3. Atom 如何隐藏 .Ds_Store 文件

    明明在core里设置了忽略文件列表,但是在右侧的文件列表中还是看到了,相当烦人.然后我查了下资料,原来还需要核心插件TreeView再设置一次遵循全局忽略文件才生效. 版本:1.12.6  (其它版本 ...

  4. js连接字符串

    实例 对象令人感兴趣的一点是用它们解决问题的方式.ECMAScript 中最常见的一个问题是字符串连接的性能.与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变.请考虑下面的 ...

  5. 2017 年值得一瞥的 JavaScript 相关技术趋势

    跨年前两天,Dan Abramov在Twitter上提了一个问题: JS社区毫不犹豫的抛出了它们对于新技术的预期与期待,本文内容也是总结自Twitter的回复,按照流行度降序排列.有一个尚未确定的小点 ...

  6. 请求网络get

    package com.baidu.net; import java.io.IOException; import org.apache.http.HttpEntity;import org.apac ...

  7. socket reuse

    int k   =   1;    if( SUCCESS != m_socketServer.setSockOptSocket( SO_REUSEADDR, (char*)&k, sizeo ...

  8. 修改oracle实例名orcl为demo

    修改oracle实例名有六步: 1.sqlplus username/password as sysdba登陆,然后从spfile文件创建pfile文件 :create pfile from spfi ...

  9. 解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/

    解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客  http://hsj69106.blog.51cto.com/1017401/595598/

  10. 迭代器模式（Iterator Pattern）

    迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. 迭代器模式(Iterator)就是分离了聚合对象的遍历行为,抽象出一个迭代器来负责这样既可以 ...