Using Popover on Hover with Twitter Bootstrap in Joomla 3

Presenting a notification text to the user using the “Popover” Javascript that comes built-in with Twitter Bootstrap in Joomla 3.1.1 is very easy. The official documentation of Twitter Bootstrap tells everything you need to understand it.

Recently I use it in a website for my client. I wrote the following code for my Popover:


<a rel="popover" data-placement="bottom" data-trigger="hover" data-content="Let us see what is inside..." data-original-title="Tips" href="my_link_goes_here">
    All Products

Lastly, Popover is triggered using this following jQuery code:

<script type="text/javascript">     jQuery(document).ready(function() {         jQuery('[rel=popover]').popover();     });

In my HTML mark, I used “data-trigger=”hover”” to show popover on cursor hover. There are four options for “data-trigger”: click, hover, focus and manual.

Hope this helps!!!!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.