Fenghe's Blog

Bootstrap Tooltip

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.

tooltip 1
tooltip 2

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>

Leave a Reply

Your email address will not be published. Required fields are marked *