Tooltip not working (Bootstrap)

Question

I am new to Bootsrap and I am just getting to know it. I am trying to use the tooltip javascript utility, I have done everything how it's supposed to be done according to the webpage, the source code I saw and some answers I found here, but it doesn't work.

Here's where I intend to use it in the 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 -->

Since the utility needs to be loaded manually, this is what I did:

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

This script is loaded at the footer of the page, after jQuery being loaded.

Answer 1

In Bootstrap 3 you can do this a lot easier and you don't need to initaite the $(document) part.

Change the html to

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

And the in the script

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

Note: You can change the placement and there are various options all here in the docs

Answer 2

bootstrap tool-tip it is incompatible with jquery ui! if you're using jquery ui remove it!