Skip to content

Javascript Components

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          ...
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

<div class="item">
        <img src="..." alt="...">
        <div class="carousel-caption">
          <h3>...</h3>
          <p>...</p>
        </div>
      </div>

Accessibility issue

The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.

Multiple carousels

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel’s id, be sure to update the relevant controls.

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0. The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()
Options

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

Name

type

default

description

interval

number

5000

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

pause

string

“hover”

Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

wrap

boolean

true

Whether the carousel should cycle continuously or have hard stops.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
        interval: 2000
      })
.carousel(‘cycle’)

Cycles through the carousel items from left to right.

.carousel(‘pause’)

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel(‘prev’)

Cycles to the previous item.

.carousel(‘next’)

Cycles to the next item.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
Event Type

Description

slide.bs.carousel

This event fires immediately when the slide instance method is invoked.

slid.bs.carousel

This event is fired when the carousel has completed its slide transition.
$('#myCarousel').on('slide.bs.carousel', function () {
        // do something…
      })

About

Get base styles and flexible support for collapsible components like accordions and navigation.

Plugin dependency

Collapse requires the transitions plugin to be included in your version of Bootstrap.

Example accordion

Using the collapse plugin, we built a simple accordion by extending the panel component.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
<div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Collapsible Group Item #3
              </a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
            </div>
          </div>
        </div>
      </div>

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
        simple collapsible
      </button>

      <div id="demo" class="collapse in">...</div>

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

  • .collapse hides the content
  • .collapse.in shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in component-animations.less.

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class in. To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$('.collapse').collapse()

Options

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

Name

type

default

description

parent

selector

false

If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior – this dependent on the panel class)

toggle

boolean

true

Toggles the collapsible element on invocation

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
        toggle: false
      })

.collapse(‘toggle’)

Toggles a collapsible element to shown or hidden.

.collapse(‘show’)

Shows a collapsible element.

.collapse(‘hide’)

Hides a collapsible element.

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

Event Type

Description

show.bs.collapse

This event fires immediately when the show instance method is called.

shown.bs.collapse

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

hide.bs.collapse

This event is fired immediately when the hide method has been called.

hidden.bs.collapse

This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#myCollapsible').on('hidden.bs.collapse', function () {
        // do something…
      })

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Lorem ipsum Elit qui adipisicing ad aute dolore voluptate incididunt id in do nostrud cupidatat dolore. Lorem ipsum Eiusmod eiusmod incididunt occaecat fugiat eu tempor dolor ut ex magna est exercitation ad veniam veniam non fugiat Excepteur. Lorem ipsum Do adipisicing sit laborum consectetur dolor sunt incididunt eu esse dolor anim proident Excepteur consequat dolor laborum sunt id non.
Lorem ipsum Fugiat voluptate cupidatat id eu qui proident fugiat amet adipisicing.

Extends tabbed navigation

This plugin extends the tabbed navigation component to add tabbable areas.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
      })

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
      $('#myTab a:first').tab('show') // Select first tab
      $('#myTab a:last').tab('show') // Select last tab
      $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

<!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="home">...</div>
        <div class="tab-pane" id="profile">...</div>
        <div class="tab-pane" id="messages">...</div>
        <div class="tab-pane" id="settings">...</div>
      </div>
Fade effect

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.

<div class="tab-content">
        <div class="tab-pane fade in active" id="home">...</div>
        <div class="tab-pane fade" id="profile">...</div>
        <div class="tab-pane fade" id="messages">...</div>
        <div class="tab-pane fade" id="settings">...</div>
      </div>
Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="nav nav-tabs" role="tablist" id="myTab">
        <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="home">...</div>
        <div class="tab-pane" id="profile">...</div>
        <div class="tab-pane" id="messages">...</div>
        <div class="tab-pane" id="settings">...</div>
      </div>

      <script>
        $(function () {
          $('#myTab a:last').tab('show')
        })
      </script>
Events
Event Type

Description

show.bs.tab

This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

shown.bs.tab

This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab
      })

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

Modal markup placement

Always try to place a modal’s HTML code in a top-level position in your document to avoid other components affecting the modal’s appearance and/or functionality.

Mobile device caveats

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

Static example

A rendered modal with header, body, and set of actions in the footer.

<div class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Button trigger modal -->
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

Make modals accessible

Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal’s DOM elements. Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

<!-- Large modal -->
      <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

      <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            ...
          </div>
        </div>
      </div>

      <!-- Small modal -->
      <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            ...
          </div>
        </div>
      </div>

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        ...
      </div>

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)
Options

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

Name

type

default

description

backdrop

boolean or the string 'static'

true

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click.

keyboard

boolean

true

Closes the modal when escape key is pressed

show

boolean

true

Shows the modal when initialized.

remote

path

false

If a remote URL is provided, content will be loaded one time via jQuery’s load method and injected into the .modal-content div. If you’re using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
        keyboard: false
      })

.modal(‘toggle’)

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

$('#myModal').modal('toggle')

.modal(‘show’)

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

$('#myModal').modal('show')

.modal(‘hide’)

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

$('#myModal').modal('hide')
Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality.

Event Type

Description

show.bs.modal

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

shown.bs.modal

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

hide.bs.modal

This event is fired immediately when the hide instance method has been called.

hidden.bs.modal

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

loaded.bs.modal

This event is fired when the modal has loaded content using the remote option.
$('#myModal').on('hidden.bs.modal', function (e) {
        // do something...
      })

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Plugin dependency

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

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Popovers in button groups and input groups require special setting

When using popovers on elements within a .btn-group or an .input-group, you’ll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

Don’t try to show popovers on hidden elements

Invoking $(...).popover('show') when the target element is display: none; will cause the popover to be incorrectly positioned.

Popovers on disabled elements require wrapper elements

To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.

Static popover

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Live demo
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
      </button>

      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
      </button>

      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
      sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
      </button>

      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
      </button>

Dismiss on next click

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

<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
$('.popover-dismiss').popover({
        trigger: 'focus'
      })

Multiple-line links

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

Usage

Enable popovers via JavaScript:

$('#example').popover(options)
Options

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

Name

Type

Default

Description

animation

boolean

true

Apply a CSS fade transition to the popover

container

string | false

false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element – which will prevent the popover from floating away from the triggering element during a window resize.

content

string | function

Default content value if data-content attribute isn’t present. If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.

delay

number | object

0

Delay showing and hiding the popover (ms) – does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 }

html

boolean

false

Insert HTML into the popover. If false, jQuery’s text method will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.

placement

string | function

‘right’

How to position the popover – top | bottom | left | right | auto. When “auto” is specified, it will dynamically reorient the popover. For example, if placement is “auto left”, the popover will display to the left when possible, otherwise it will display right.

selector

string

false

If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.

template

string

'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

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 | function

Default title value if title attribute isn’t present

trigger

string

‘click’

How popover is triggered – click | hover | focus | manual. You may pass multiple triggers; separate them with a space.

viewport

string | object

{ selector: ‘body’, padding: 0 }

Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover(‘show’)

Reveals an elements popover.

$('#element').popover('show')

.popover(‘hide’)

Hides an elements popover.

$('#element').popover('hide')

.popover(‘toggle’)

Toggles an elements popover.

$('#element').popover('toggle')

.popover(‘destroy’)

Hides and destroys an element’s popover.

$('#element').popover('destroy')
Events
Event Type

Description

show.bs.popover

This event fires immediately when the show instance method is called.

shown.bs.popover

This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).

hide.bs.popover

This event is fired immediately when the hide instance method has been called.

hidden.bs.popover

This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
$('#myPopover').on('hidden.bs.popover', function () {
        // do something…
      })

Want to learn more?

The state templates are based on Bootstrap v3.1.1., licensed under MIT. For more information, go to getbootstrap.com. We are using the PayPal accessibility plugin to enhance the accessibility of the templates.