Providing Tooltips on Hover

NOTE: You will need intermediate HTML knowledge to fully understand the contents of this KB article. Also note that this will only work on themes built with the Bootstrap framework. The tooltips will not have the same look on pages that requires the jQuery.ui library, although they will still appear.

Incorporating the tooltip into a site built with Bootstrap is a trivial task, and easy to do. The scope of this KB is to show how it is done, but there are many features of the tooltips we will not go over. Feel free to refer to the Bootstrap Tooltip section for more information, and to see what is the tooltip is capable of doing.

Initial Setup

You will first need to place a script in the head tags of your theme, under Themes > Edit Theme > Head Tags. This is to initialize the tooltip functionality.

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

Creating the Tooltip

Now we have the code in place to initialize the tooltips. Next comes the part where we can set the content that will display, and where it will display at.

1. Go the the HTML Editor of the page you want to have the tooltip display. Find the section of HTML that corresponds with the location of the tooltip.
2. You will need to add a couple parameters to the line of HTML.
   • title="The actual tooltip content"
   • data-toggle="tooltip" <!--This is required -->
   • data-placement="left" <!--This is optional, but lets you set where you want the tooltip to show up. left , right , bottom , top are the viable options for this section -->
3. Take the paramters, and combine them into one string, and then place these in the element. Your ending element will look something like this:
   <a href="/" title="My Cart" data-toggle="tooltip" data-placement="left">Click here!</a>
4. Save the HTML, and test to make sure its working!

After these steps, the tooltip should be up and running! Now go crazy and tooltip all the things!