提示框--JS触发提示框方法，玩转Bootstrap（JS插件篇）教程-慕课网

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

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

最简单的触发方式如下：

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

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

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

运行的效果如下：

任务

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

?不会了怎么办

参考代码如下：

  <script>
  $(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
    $('#myTooltip2').tooltip({
      title:"我是一个提示框2，我在顶部出现",
      placement:'top'
    });
  });
  </script>

index.html

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>触发提示框方法</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在顶部"> 提示框在顶部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部"> 提示框在底部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右"> 提示框居右 </button> <h3>链接制作的提示框</h3> <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示框居左"> 提示框居左 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示框在顶部"> 提示框在顶部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示框在底部"> 提示框在底部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示框在居右"> 提示框居右 </a> <a href="##" class="btn btn-primary" id="myTooltip"> 我是提示框 </a> <a href="##" class="btn btn-primary" id="myTooltip2"> 我是提示框2 </a> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框，我在顶部出现", placement:'top' }); }); </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

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