Bootstrap Popover Plugin

In bootstrap, popover plugin is similar to tooltip plugin. A popover is a pop up box which is opened when the user clicks on the element. The difference between tooltip and popover is that a popover has more capacity to add content.

It should be noted that popover plugin depends on tooltip plugin. We can use popover plugin by using bootstrap Data API which will require tooltip.

The popover plugin can be added into bootstrap individually by including the popover.js files. Popover plugin can also be added when we use bootstrap.js files.


Usage:

Popover plugin can be added by using one of the following two methods:


By Using Data attributes:

Popover plugins can be used by using data-toggle = “popover” inside a button or anchor element. It should be noted that the text of popover and title of anchor will be same.

Consider the following example in which it is demonstrated that how popover plugin can be used:

CODE:

< a href = “#” data- toggle = “popover” title = “Example of popover”>

Click me to open popover.

</ a >


By using JavaScript:

A single line of code of JavaScript can be used to call popover. Consider the following statement:

$ (‘#identifier’). popover (options)

To use popover plugin, we must use jquery. Use the following statement or script for popover to be enabled:

$ (function () { $(“[data- toggle = ‘popover’]”).popover (); });


Example:

Consider the following example in which the popover plugin is used by using data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div class = “container” style = “padding: 75px 40px 20px;” >

<button type = “button” class = “btn btn-default” title = “Title ofPopover”

data-container = “body” data-toggle = “popover” data-placement = “left”

data-content = “Content of Popover on left side”>

Default Button (On Left side)

</button>

<button type = “button” class = “btn btn-primary” title = “Title of Popover”

data-container = “body” data-toggle = “popover” data-placement = “top”

data-content = “Content of Popover on top”>

Primary button (On Top)

</button>

<button type = “button” class = “btn btn-success” title = “Title of Popover”

data-container = “body” data-toggle = “popover” data-placement = “bottom”

data-content = “Content of Popover on bottom”>

Success button (On bottom)

</button>

<button type = “button” class = “btn btn-warning” title = “Title of Popover”

data-container = “body” data-toggle = “popover” data-placement = “right”

data-content = “Content of Popover on right”>

Warning button (On Right side)

</button>

</div>

<script>

$(function (){

$(“[data-toggle = ‘popover’]”).popover();

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Bootstrap Example

The popover will opened when we click on the button. Same is the case if we used links that is anchor tag.


Options:

There a number of options for popover plugin that can be added by using Bootstrap Data API or by using JavaScript. Consider the following table in which we have described a number of options of popover plugin:

Option Type Default Value Data Attribute Description
animation Boolean Default: true data-animation This option is used to apply a fade transition effect to the popover.
html Boolean Default: false data-html This option is used insert html into popover. If the default value is false, then we will use text method of jQuery to add content in DOM.
placement Boolean Default: top data-placement This option is used to decide the position of the popover that is if the popover is going to be on left side or right, top or bottom or auto. When the value is auto, popover will be reoriented for example if value is “auto left”, then popover will be displayed on left side only if possible otherwise it will be displayed on the right side.
selector string Default: top data-selector This option is used to assign the popover a specific target.
title string Default: “ data- title This option is used to provide the default value of title if there is no title attribute.
trigger string Default: “ data-trigger This option is used to define how popover is triggered.
content string Default: “ data-content This option is used to provide the default value of content if there is no data content attribute.
delay number Default: 0 data-delay This option is used to create delay when showing and hiding a popover.
container string Default: false data- container This option is used to append the popover to specific element.

Methods:

Consider the following table in which we have described various methods of popover plugin:

Method Description Basic Syntax
Options- .popovertip (options) This method is used to attach popover handler to element. $().popover(options)

 

Toggle- .popover(‘toggle’) This method is used to toggle the popover plugin of any element. $(‘#element’).popover(‘toggle’)

 

Show- .popover(‘show’) This method is used to show the popover of an element. $(‘#element’).popover(‘show’)

 

Hide- .popover(‘hide’) This method is used to hide the popover of an element. $(‘#element’).popover(‘hide’)

 

Destroy- .popover(‘destroy’) This method is used to destroy the popover of any element. $(‘#element’).popover(‘destroy’)

 


Example:

Consider the following example in which methods of popover plugins are used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “container” style = “padding: 75px 40px 20px;”  >

< button type = “button” class = “btn btn- default popover- show”

title = “Title of” data- container = “body”

data- toggle = “popover” data- placement = “left”

data- content = “Content in Popover using show method” >

Default button (On Left side)

</ button >

< button type = “button” class = “btn btn -primary popover- hide”

title = “Title of Popover” data- container = “body”

data- toggle = “popover” data- placement = “top”

data- content = “Content in Popover using hide method” >

Primary button (On Top)

</ button >

< button type = “button” class = “btn btn- success popover- destroy”

title = “Title of Popover” data- container = “body”

data- toggle = “popover” data- placement = “bottom”

data- content = “Content in Popover using destroy method” >

Success button (On Bottom)

</ button >

< button type = “button” class = “btn btn- warning popover- toggle”

title = “Title of Popover” data- container = “body”

data- toggle = “popover” data- placement = “right”

data- content = “Content in Popover using toggle method” >

Warning button (On Right side)

</ button >

< br >< br >< br >

< p class = “popover- options” >

< a href = “#” type = “button” class = “btn btn- warning”

title = ” < h2 > Title of Popover </ h2 >” data- container = “body”

data- toggle = “popover” data- content = “

< h4 > Content in Popover using option method </ h4 >” >

Popover

</ a >

</ p >

< script >

$ (function () { $ (‘.popover- show’). popover (‘show’);});

$ (function () { $ (‘.popover- hide’). popover (‘hide’);});

$ (function () { $ (‘.popover- destroy’). popover (‘destroy’);});

$ (function () { $ (‘.popover- toggle’). popover (‘toggle’);});

$ (function () { $ (“.popover- options a”). popover ({html : true });});

</ script >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

title of popover


Events:

Consider the following table in which the events of popover plugin are described:

Event Description Basic Syntax
show.bs.popover This event is occurred when the show method is invoked. $(‘#popover1’).on(‘show.bs.popover’, function () {

Body

})

 

show.bs.popover This event is occurred when the popover has been shown. $(‘#popover1’).on(‘shown.bs.popover’, function () {

Body

})

 

hide.bs.popover This event is occurred when the hide method is invoked. $(‘popover1’).on(‘hide.bs.popover’, function () {

Body

})

 

hidden.bs.popover This event is occurred when the popover has been hidden from the user. $(‘#popover1’).on(‘hidden.bs.popover’, function () {

Body

})

 


Example:

Consider the following example which shows the events of popover plugin:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “container” style = “padding: 75px 40px 20px;”  >

<button type = “button” class = “btn btn-warning popover-show”

title = “Popover title” data-container = “body” data-toggle = “popover”

data-content = “Content in popover using show method”>

Warning button (On left side)

</button>

</div>

<script>

$(function () { $(‘.popover-show’).popover(‘show’);});

$(function () { $(‘.popover-show’).on(‘shown.bs.popover’, function () {

alert(“This is an alert message”);

})});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

ok

In the above example we set a condition that when the popover is shown an alert message should appear. This is done by using the shown method of popover.