Submodule 10.3: Revealing Content

Let us now switch to the index.html page. We will now add a tooltip to this page. The tooltip will be added to the "Reserve Table" button that is in the jumbotron.

We will update the <a> tag for the button as follows:

<a type="button" class="btn btn-warning btn-sm btn-block"
  data-toggle="tooltip" data-html="true" 
  title="Or Call us at <br><strong>+ 987 6543 2100</strong>"
  data-placement="bottom" href="#reserve-form">
  Reserve your baskets
</a>

As you can see from the code, we add a data-toggle, data-placement and a title attribute to the <a> tag in order to introduce a tooltip.
The tooltip needs to be activated by adding a small Javascript code to the bottom of the page as follows:

<script>
  $(function () {
     $('[data-toggle="tooltip"]').tooltip()
   })
 </script>

This script is added right after the line that imports the bootstrap.min.js file.

This code will create a page displayed as: