javascript - 工具提示不起作用( Bootstrap )

Question

我是 Bootsrap 的新手，我才刚刚开始了解它。我正在尝试使用 tooltip javascript 实用程序，我已经根据网页、我看到的源代码和我在这里找到的一些答案完成了它应该如何完成的所有事情，但它不起作用。

这是我打算在 HTML 中使用它的地方:

<!-- Hola mundo -->
<div class="row">
  <div class="starter-template tab-content">
    <div class="tab-pane fade in active tooltip-demo" id="home">
      <h1>¡Hola, mundo!</h1>
      <p class="lead">Nunc sit amet nunc dui. <a href="#" data-toggle="tooltip" data-original-title="Pista 1">Aliquam</a> nec viverra mi, et pellentesque sem. In dapibus sem ut consectetur dignissim. </p>
    </div>
    <!-- /div#home -->
  </div>
  <!-- /div.starter-template -->
</div>
<!-- /div.row -->

由于该实用程序需要手动加载，所以我这样做了:

<script>
  $(document).ready(function (){
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })
  });

此脚本在加载 jQuery 后加载到页面底部。

Answer 1

在 Bootstrap 3 中，你可以更容易地做到这一点，你不需要初始化 $(document) 部分。

将html改为

<a href="#" data-toggle="tooltip" title="pista 1"> Aliquam</a>

在脚本中

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

注意:您可以更改位置，并且有各种选项所有 here在文档中