3-11 提示框--JS设置参数方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

提示框--JS设置参数方法

除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数，主要包括：

表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用。

例子：

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

任务

我来试试：在右侧代码编辑器中亲自尝试一下上面的各种参数。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7.   <style>
  8.   body {
  9.     padding: 100px;
  10.   }
  11.   .btn {
  12.     margin: 20px 10px 20px;
  13.   }
  14.   </style>
  15. </head>
  16. <body>
  17.   <h3>按钮做的提示框</h3>
  18.   <button type="button" class="btn btn-default" id="myTooltip1">提示框居左</button>
  19.   <button type="button" class="btn btn-default" id="myTooltip2">提示框在顶部</button>
  20.   <button type="button" class="btn btn-default" id="myTooltip3">提示框在底部</button>
  21.   <button type="button" class="btn btn-default" id="myTooltip4">提示框居右</button>
  22.   <h3>链接制作的提示框</h3>
  23.   <a href="##" class="btn btn-primary" id="myTooltip5">我是提示框</a>
  24.   <a href="##" class="btn btn-primary" id="myTooltip6">我是提示框</a>
  25.   <a href="##" class="btn btn-primary" id="myTooltip7">我是提示框</a>
  26.   <a href="##" class="btn btn-primary" id="myTooltip8">我是提示框</a>
  27.  
  28.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  29.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  30.   <script>
  31.   $(function(){
  32.     $('#myTooltip1').tooltip({
  33.       title:"我是一个提示框，我在顶部出现",
  34.       placement:"top"
  35.     });
  36.   });
  37.   </script>
  38.  
  39. </body>
  40.  
  41.  
  42. </html>
下一节