jQuery plug-in for Bootstrap popover enhancement with demos

The Bootstrap popover and jQuery plug-in

The Bootstrap popover can be used as an overlay for showing helpful or additional information related to the context for a specific section of the web page.

The built-in popover component of the Bootstrap has a few features that can be implemented easily. In this tutorial, I am going to use a jQuery based plug-in that enables enhancing the popover features. Not only you may use this in the Bootstrap-based project but non Bootstrap as well.

The plug-in name is webui-popover which is available for downloading from the GutHub website here. The features of this awesome plug-in include the support for more placements of a popover. It also allows adding the close button and you may use multiple popovers in the single page.

Apart from that, it has different styles while it also supports frame and URLs. The popovers can also be presented with animations. I will show you demos of different features in the following section along with how you may set up this plug-in.

A demo of creating variety of popovers by using plug-in

In this demo, a variety of popovers is created in a single page. You can see the left menu for selecting the options, for example, “Specified Placements”. As you select this menu (the default), you can see multiple circles in the right side. Click on any to open the popup, which is the default behavior.

Each circle shows a popup with a small description e.g. placement:’bottom-right’, placement:’right-bottom’, placement:’right’, placement:’top’, and many others.

You may change the opening of popover from click to hover state by using the settings options in the left navigation (click on the wagon wheel and select hover option from of trigger).  Have a look at demo:

jQuery popover

See online demo and code

The second menu option, Auto Detect placement also has many examples for opening the pop over in a page. You may also open the popovers with animations as shown in the “Pop With Animations” section.

You may explore other examples as well and get the complete code in the demo page. (All examples are done by plug-in developer, see the credit below).

Setting up popover jQuery plug-in

For setting up this plug-in for enhancing Bootstrap based or other platform’s popovers, download the plugin from the following link (Credit: sandywalker).

After downloading, extract the package and get the jquery.webui-popover.min.css and jquery.webui-popover.min.js or its non-minified files. Include CSS file in the <head> section while JS file above the </body> tag along with jQuery JS file.

                                <link rel=”stylesheet” href=”css/jquery.webui-popover/jquery.webui-popover.min.css”>

<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>

<script src=”js/jquery.webui-popover/jquery.webui-popover.min.js”></script>

In the demo page’s code, you can see the data-placement data attribute is used in <a> tag with the desired direction like data-placement=”horizontal”, data-placement=”vertical”, data-placement=”auto-bottom” etc.

 

   <a href="#" class="show-pop btn btn-default bottom-right" data-placement="bottom-right"

                                                                                                                                data-content="<p>A demo of popover</p><p><code>placement:'bottom-right'</code></p>" > <i class="glyphicon glyphicon-cloud"></i></a>

 

For creating a popover with animation, the following sample markup is used:

 

<a href="#" class="btn btn-success  show-pop pull-right" data-animation="fade"  data-placement="vertical"

                                                                                                                                                                data-content="<p>A demo of popover with animation</p>"

                                                                                                                                                                ><span class="prefix">animation:</span>fade</a>

 

That is, use the data-animation attribute with the value of animation style that you want to use.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️