OpenSourceVarsity

pdf icons

Bootstrap Popovers Tutorial

Popover is a small overlay of content that is used to display information adjacent to any element when the element is clicked on. The popover is similar to tooltip, offering an extended view complete with a heading.

The popover plugin displays content and markup on demand, and by default places the popover after their trigger element. You can add a popover in the following ways:

  • Via data attributes: To add a popover, add data-toggle=”popover” to an anchor/button tag. The title of the anchor will be the text of a popover. By default, popover is set to top by the plugin.
    <a href=”#” data-toggle=”popover” title=”Example popover”>Hover over me</a>
  • Via JavaScript: Enable popovers via JavaScript using the following syntax:
    $(‘#identifier’).popover(options)

NOTE: Popovers require the tooltip plugin to be included in your version of Bootstrap.

NOTE: Invoking the popover JS function when the target element is hidden will cause the popover to be incorrectly positioned.

NOTE: When adding a popover on disabled element OR to an element with class .disabled put the element inside of a <div></div> and apply the popover to that <div></div>.

Popovers can appear in four ways as shown in diagram 1:

  1. Top
  2. Right
  3. Bottom
  4. Left

Bootstrap Popovers Example 1 Diagram 1

Positioning of Popovers via Data Attributes

Codespec 1 shows how to set the direction of popovers via data attributes.

<button type=”button” class=”btn btn-primary” data-toggle=”popover” data-placement=”top” title=”Popover title” data-content=”Default popover”>Popover on top</button>

<button type=”button” class=”btn btn- primary” data-toggle=”popover” data-placement=”right” title=”Popover title” data-content=”Popover on right.”>Popover on right</button>

<button type=”button” class=”btn btn- primary” data-toggle=”popover” data-placement=”bottom” title=”Popover title” data-content=”Popover on bottom.”>Popover on bottom</button>

<button type=”button” class=”btn btn- primary” data-toggle=”popover” data-placement=”left” title=”Popover title” data-content=”Popover on left.”>Popover on left</button>

Codespec 1

data-toggle This triggers the popover
data-placement Placement of the popover
title Title of the popover
data-content Contents of the popover

Click to download our different popover examples

Positioning of Popovers via JavaScript

Codespec 2 shows how to set the direction of popovers via JavaScript.

<script  type="text/j-avascript">
 $(document).ready(function(){
 $(".pop-top").popover({placement : 'top'});

 $(".pop-right").popover({placement : 'right'});

 $(".pop-bottom").popover({placement : 'bottom'});

 $(".pop-left").popover({  placement : 'left'});
 });
</script>

Codespec 2

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

NOTE: For proper cross-browser and cross-platform behavior, you must use the <a></a> tag, not the <button> tag. In the <a></a> tag include the role=”button” and tabindex = “0” attributes as shown in the code snippet below.

<a tabindex=”0″ class=”btn btn-danger” role=”button” data-toggle=”popover” data-trigger=”focus” title=” Popover dismiss” data-content=”Popover dismiss content.”>Popover dismiss link</a>

Bootstrap Popovers Example 2 Diagram 2

Popover Methods

Method Name Description
$().popover(options) This method attaches the popover handler to a group of elements.
.popover(‘show’) This method reveals an element’s popover.
.popover(‘hide’) This method hides an element’s popover.
.popover(‘toggle’) This method toggles an element’s popover.
.popover(‘destroy’) This method hides and destroys an element’s popover.

Popover Events

Event Type Description
show.bs.popover Event fires immediately when the show instance method is called.
shown.bs.popover Event is fired when the popover has been made visible to the user and will wait for CSS transitions to complete.
hide.bs.popover Event is fired immediately when the hide instance method has been called.
hidden.bs.popover Event is fired when the popover has finished being hidden from the user and will wait for CSS transitions to complete.
inserted.bs.popover Event is fired after the show.bs.popover event when the popover template has been added to the DOM.

See our different popover examples as shown in diagram 3.

Bootstrap Popovers Example 3 Diagram 3

Click to download our different popover examples

If you are a competent HTML5 / CSS3 / -JavaScript programmer we are sure you will be able to change the code of the web page modal window we’ve written to make the code snappier and perhaps a tad shorter.

Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.

Should you have any queries about the popover examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum.

We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.

Click to download our different popover examples

 

October 18, 2016
Design by Ivan Bayross and Meher Bala © 2016 All Rights Reserved
X