3-9 提示框--JS触发提示框方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

提示框--JS触发提示框方法

Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

最简单的触发方式如下：

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：

$(function(){
    $('#myTooltip').tooltip({
       title:"我是一个提示框，我在顶部出现",
       placement:'top'
    });
});

运行的效果如下：

任务

我来试试：使用JS的方法为id="myTooltip2"的按钮添加一个提示框。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>触发提示框方法</title>
  6.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7.  
  8.   <style id="jsbin-css">
  9.   body {
  10.     padding: 100px;
  11.   }
  12.   .btn {
  13.     margin: 20px 10px 20px;
  14.   }
  15.   </style>
  16. </head>
  17. <body>
  18.   <h3>按钮做的提示框</h3>
  19.   <button type="button" 
  20.           class="btn btn-default" 
  21.           data-toggle="tooltip" 
  22.           data-placement="left" 
  23.           data-original-title="提示框居左" 
  24.           title="">
  25.   提示框居左      
  26.   </button>
  27.   <button type="button" 
  28.           class="btn btn-default" 
  29.           data-toggle="tooltip" 
  30.           data-placement="top" 
  31.           data-original-title="提示框在顶部">
  32.    提示框在顶部
  33.   </button>
  34.   <button type="button" 
  35.           class="btn btn-default" 
  36.           data-toggle="tooltip" 
  37.           data-placement="bottom" 
  38.           data-original-title="提示框在底部">
  39.   提示框在底部             
  40.   </button>
  41.   <button type="button" 
  42.           class="btn btn-default" 
  43.           data-toggle="tooltip" 
  44.           data-placement="right" 
  45.           data-original-title="提示框居右">
  46.   提示框居右      
  47.   </button>
  48.   <h3>链接制作的提示框</h3>
  49.   <a class="btn btn-primary" 
  50.      data-toggle="tooltip" 
  51.      data-placement="left" 
  52.      title="提示框居左">
  53.      提示框居左
  54.   </a>
  55.   <a class="btn btn-primary" 
  56.      data-toggle="tooltip" 
  57.      data-placement="top" 
  58.      title="提示框在顶部">
  59.      提示框在顶部
  60.   </a>
  61.   <a class="btn btn-primary" 
  62.      data-toggle="tooltip" 
  63.      data-placement="bottom" 
  64.      title="提示框在底部">
  65.      提示框在底部
  66.   </a>
  67.   <a class="btn btn-primary" 
  68.      data-toggle="tooltip" 
  69.      data-placement="right" 
  70.      title="提示框在居右">
  71.      提示框居右
  72.   </a>
  73.   <a href="##" 
  74.      class="btn btn-primary" 
  75.      id="myTooltip">
  76.      我是提示框
  77.   </a>
  78.   <a href="##" 
  79.      class="btn btn-primary" 
  80.      id="myTooltip2">
  81.      我是提示框2
  82.   </a>
  83.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  84.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  85.   <script>
  86.   $(function(){
  87.     $('[data-toggle="tooltip"]').tooltip();
  88.     $('#myTooltip').tooltip({
  89.       title:"我是一个提示框，我在顶部出现",
  90.       placement:'top'
  91.     });
  92.   });
  93.   </script>
  94.  
  95. </body>
  96.  
  97.  
  98. </html>
下一节