Latest web development tutorials
 

Bootstrap JS Popover

❮ Previous Next Reference ❯

JS Popover (popover.js)

The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap.

For a tutorial about Popovers, read our Bootstrap Popover Tutorial.

Via data-* Attributes

The data-toggle="popover" activates the popover.

The title attribute specifies the header text of the popover.

The data-content attribute specifies the text that should be displayed inside the popover's body.

Example

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Try it Yourself »

Via JavaScript

Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.

Example

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Try it Yourself »

Popover Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="".

Name Type Default Description Try it
animation boolean true

Specifies whether to add a CSS fade transition effect when opening and closing the popover

  • true - Add a fading effect
  • false - Do not add a fading effect
 Try it
container string, or the boolean false false Appends the popover to a specific element.
Example: container: 'body'		 Try it
content string "" Specifies the text inside the popover's body Try it
delay number, or object 0 Specifies the number of milliseconds it will take to open and close the popover.

To specify a delay for opening and another one for closing, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it		 Try it
html boolean false Specifies whether to accept HTML tags in the popover:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).

When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks		 Try it
placement string "right" Specifies the popover position. Possible values:

  • "top" - Popover on top
  • "bottom" - Popover on bottom
  • "left" - Popover on left
  • "right" - Popover on right
  • "auto" - Lets the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the popover will display at the bottom when possible, otherwise on the top
 Try it
selector string, or the boolean false false Adds the popover to a specified selector Try it
template string   Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-title.

The popover's content will be injected into the .popover-content.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.
title string "" Specifies the header text of the popover Try it
trigger string "click" Specifies how the popover is triggered. Possible values:

  • "click" - Trigger the popover with a click
  • "hover" - Trigger the popover on hover
  • "focus" - Trigger the popover when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the popover manually
Tip: To pass multiple values, separate them with a space		 Try it
viewport string, or object {selector: "body", padding: 0} Keeps the popover within the bounds of this element.

Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Popover Methods

The following table lists all available popover methods.

Method Description Try it
.popover(options) Activates the popover with an option. See options above for valid values Try it
.popover("show") Shows the popover Try it
.popover("hide") Hides the popover Try it
.popover("toggle") Toggles the popover Try it
.popover("destroy") Hides and destroys the popover Try it

Popover Events

The following table lists all available popover events.

Event Description Try it
show.bs.popover Occurs when the popover is about to be shown Try it
shown.bs.popover Occurs when the popover is fully shown (after CSS transitions have completed) Try it
hide.bs.popover Occurs when the popover is about to be hidden Try it
hidden.bs.popover Occurs when the popover is fully hidden (after CSS transitions have completed) Try it
Examples

Examples

Custom Popover Design

Use CSS to customize the look of the popover:

Example

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
Try it Yourself »

❮ Previous Next Reference ❯