编程 Javascript

bootstrap的工具提示实例代码

Posted in Javascript onMay 17, 2017

Bootstrap 工具提示（Tooltip）插件当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

工具提示实现代码如下所示：

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
  <title>XXX</title> 
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
  <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
  <!--[if lt IE 9]> 
  <script src="lib/html5shiv/html5shiv.min.js"></script> 
  <script src="lib/respond/respond.min.js"></script> 
  <![endif]--> 
</head> 
<body style="margin: 200px;"> 
<!--系统默认提示--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="默认提示">系统默认</a> 
<!--bootstrop的工具提示，还需要写jQuery才能实现--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bootstrop提示" data-toggle="tooltip">bootstrop的工具提示</a> 
<!--data-animation默认 true，在 tooltip 上应用一个 CSS fade 动画。 
如果设置 false，则不应用。--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="animation" data-toggle="tooltip" data-animation="false">data-animation</a> 
<!--data-html默认 false，不允许提示内容格式为 html。如果设置 
为 true，则可以设置 html 格式的提示内容。--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="<b>html</b>" data-toggle="tooltip" data-html="true">data-html</a> 
<!--data-placement默认值 top，还有 bottom、left、right 和 auto。 
如果 auto 会自行调整合适的位置， 如果是 auto left 
则会尽量在左边显示，但左边不行就靠右边。--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="placement" data-toggle="tooltip" data-placement="bottom">data-placement</a> 
<!--data-trigger默认值 hover foucs，表示怎么触发 tooltip，其 
他值为： click、 manual。多个值用空格隔开， manual 
手动不能和其他同时设置。--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="trigger" data-toggle="tooltip" data-trigger="click">data-trigger</a> 
<!--data-delay默认值 0，延迟触发 tooltip(毫秒)，如果传数字则， 
表示 show/hide 的毫秒数，如果传对象，结构为：{show:500,hide:100}这个要在jQuery中才能实现--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="delay" data-toggle="tooltip" data-delay="2000">data-delay</a> 
<!--data-template更改提示框的 HTML 提示语的模版，默认值为：<div 
class='tooltip'><div 
class='tooltip-arrow'></div><div 
class='tooltip-inner'></div></div>。--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="template" data-toggle="tooltip" data-template="<b>123<b/>">data-template</a> 
<br> 
<br> 
<br> 
<!--data-selector默认 false，可以选择绑定指定的选择器。必须要用它的父类才能实现，使用jQuery--> 
<div id="selection"> 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" rel="tooltip" data-toggle="tooltip">绑定选择器</a> 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="绑定选择器" data-toggle="tooltip">绑定选择器</a> 
</div> 
<br> 
<br> 
<br> 
<!--使用按钮组，给工具提示暂用的地方很小，所以提示会被挤压变形，按钮也会被挤动，所以、 
应该分配更大的空间给提示来显示--> 
<!--data-container默认值 false，将 tooltip 附加到特定的元素上。比 
如组合按钮组提示，容器不够，可以附加 body 上。 
container : 'body',需要使用jQuery--> 
<div class="btn-group"> 
  <button class="btn btn-default" title="按钮" data-toggle="tooltip">1</button> 
  <button class="btn btn-default" title="按钮" data-toggle="tooltip">2</button> 
  <button class="btn btn-default" title="按钮" data-toggle="tooltip">3</button> 
</div> 
<br> 
<br> 
<br> 
<br> 
<!--其他show、hide、toggle 和 destroy 四种方法--> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="点击弹出提示" data-toggle="tooltip" id="clc">点击弹出提示</a> 
<button class="btn btn-default" id="btn">点击弹出或隐藏提示</button> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
  //  $('a').tooltip(); 
  /*selector*/ 
  $('#selection').tooltip({ 
    selector: 'a[rel=tooltip]' 
  }); 
  /*container*/ 
  $('button').tooltip({ 
    delay: { 
      show: 100, 
      hide: 100 
    }, 
    container: 'body' 
  }); 
  /*其他方法*/ 
  $('#clc').tooltip({ 
    trigger:'click' 
  }); 
  $('#btn').on('click', function () { 
    $('#clc').tooltip('show'); 
   /*  $('#clc').tooltip('hide'); 
    $('#clc').tooltip('toggle'); 
    $('#clc').tooltip('destory');*/ 
  }); 
  /*4个事件 
  * show.bs.tooltip 在提示框显示前立即触发 
   shown.bs.tooltip 在提示框完全显示给用户之后触发 
   hide.bs.tooltip 在提示框隐藏前立即触发 
   hidden.bs.tooltip 在提示框完全隐藏之后触发 
  * */ 
  $('a').on('show.bs.tooltip', function () { 
    alert('在提示框显示前立即触发'); 
  }); 
</script> 
</body> 
</html>

bootstrap的工具提示实例代码

- Author -

YY小苹果

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

Javascript 相关文章推荐

面向对象的Javascript之一(初识Javascript)

Jan 20 Javascript

jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

Jan 15 Javascript

jQuery+CSS 半开折叠效果原理及代码(自写)

Mar 04 Javascript

解析JavaScript中delete操作符不能删除的对象

Dec 03 Javascript

JQuery显示隐藏DIV的方法及代码实例

Apr 16 Javascript

JavaScript数组各种常见用法实例分析

Aug 04 Javascript

jQuery siblings()用法实例详解

Apr 26 Javascript

JS+CSS实现网页加载中的动画效果

Oct 27 Javascript

webpack external模块的具体使用

Mar 10 Javascript

Vue使用json-server进行后端数据模拟功能

Apr 17 Javascript

小程序自定义模板实现吸顶功能

Jan 08 Javascript

Vue-router编程式导航的两种实现代码

Mar 04 Vue.js

js字符串与Unicode编码互相转换

May 17 #Javascript

JavaScript实现省市县三级级联特效

May 16 #Javascript

原生js简单实现放大镜特效

May 16 #Javascript

javascript 中iframe高度自适应（同域）实例详解

May 16 #Javascript

vue.js实现用户评论、登录、注册、及修改信息功能

May 30 #Javascript

Vue.js tab实现选项卡切换

May 16 #Javascript

Vue.js手风琴菜单组件开发实例

May 16 #Javascript