Tooltip not working (Bootstrap)

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.