As you can see from the following 2 photos, what tooltip does is that when a user moves the mouse to the specified component, a small text box is shown, indicating some additional information.


Following is the HTML code snippet,
<a role="button" class="btn btn-block nav-link btn-warning" data-toggle="tooltip" data-html="true" title="Or Call us at <br><strong>+852 12345678</strong>" data-placement="bottom" href="#reserveform"> Reserve Table </a>
To make it work, you also need to include some inline javascript code
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>