编程 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动画浅析

Aug 30 Javascript

JS实现跟随鼠标立体翻转图片的方法

May 04 Javascript

jQuery获取页面及个元素高度、宽度的总结——超实用

Jul 28 Javascript

JS实现具备延时功能的滑动门菜单效果

Sep 17 Javascript

基于JS实现EOS隐藏错误提示层代码

Apr 25 Javascript

jQuery实现给input绑定回车事件的方法

Feb 09 Javascript

微信小程序 template模板详解及实例

Feb 21 Javascript

Vue制作Todo List网页

Apr 26 Javascript

BootStrap的双日历时间控件使用

Jul 25 Javascript

微信小程序收藏功能的实现代码

Jun 12 Javascript

读懂CommonJS的模块加载

Apr 19 Javascript

vue路由权限校验功能的实现代码

Jun 07 Javascript

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