+ +

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.

- -

Popovers popover.js

Plugin dependency

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

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).

+ +

Static popover

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

+ -

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.

+ -

Plugin dependency

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

+ +

Usage

Enable popovers via JavaScript:

+ {% highlight js %}$('#example').popover(options){% endhighlight %} -

Live demo

- Click to toggle popover -

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 tooltip
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 placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector	string	false	if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip 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.
trigger	string	'click'	how popover is triggered - click \| hover \| focus \| manual
title	string \| function	''	default title value if `title` attribute isn't present
content	string \| function	''	default content value if `data-content` attribute isn't present
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 }` +
container	string \| false	false	+ Appends the popover to a specific element. Example: `container: 'body'` +

Data attributes for individual popovers

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

Four directions

- - - -

- - -

Usage

Enable popovers via JavaScript:

- {% highlight js %}$('#example').popover(options){% endhighlight %} - -

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 tooltip
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 placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector	string	false	if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip 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.
trigger	string	'click'	how popover is triggered - click \| hover \| focus \| manual
title	string \| function	''	default title value if `title` attribute isn't present
content	string \| function	''	default content value if `data-content` attribute isn't present
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 }` -
container	string \| false	false	- Appends the popover to a specific element. Example: `container: 'body'` -

Data attributes for individual popovers

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

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

+ +

Methods

$().popover(options)

Initializes popovers for an element collection.

+ +

.popover('show')

Reveals an elements popover.

+ {% highlight js %}$('#element').popover('show'){% endhighlight %} -

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

- -

Methods

$().popover(options)

Initializes popovers for an element collection.

- -

.popover('show')

Reveals an elements popover.

- {% highlight js %}$('#element').popover('show'){% endhighlight %} - -

.popover('hide')

Hides an elements popover.

- {% highlight js %}$('#element').popover('hide'){% endhighlight %} - -

.popover('toggle')

Toggles an elements popover.

- {% highlight js %}$('#element').popover('toggle'){% endhighlight %} - -

.popover('destroy')

Hides and destroys an element's popover.

- {% highlight js %}$('#element').popover('destroy'){% endhighlight %} - -

Events

- - - - - - - - - - - - - - - - - - - - - - - - - -

Event Type	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

.popover('hide')

Hides an elements popover.

+ {% highlight js %}$('#element').popover('hide'){% endhighlight %} + +

.popover('toggle')

Toggles an elements popover.

+ {% highlight js %}$('#element').popover('toggle'){% endhighlight %} + +

.popover('destroy')

Hides and destroys an element's popover.

+ {% highlight js %}$('#element').popover('destroy'){% endhighlight %} ++

Events

++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++

Event Type	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

+ {% highlight js %} + $('#myPopover').on('hidden.bs.popover', function () { + // do somethingâ¦ + }) + {% endhighlight %} -

+ - -

- +

Example alerts

Add dismiss functionality to all alert messages with this plugin.

+ + Holy guacamole! Best check yo self, you're not looking too good. +

+ +

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

+ Take this action Or do this +

Example alerts

Add dismiss functionality to all alert messages with this plugin.

- - Holy guacamole! Best check yo self, you're not looking too good. -

- -

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- Take this action Or do this -

- - -

Usage

Enable dismissal of an alert via JavaScript:

- {% highlight js %}$(".alert").alert(){% endhighlight %} - -

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

- {% highlight html %}×{% endhighlight %} - -

Methods

- -

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

- -

.alert('close')

Closes an alert.

- {% highlight js %}$(".alert").alert('close'){% endhighlight %} - - -

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

- - - - - - - - - - - - - - - - - -

Event Type	Description
close	This event fires immediately when the `close` instance method is called.
closed	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

+ +

Usage

Enable dismissal of an alert via JavaScript:

+ {% highlight js %}$(".alert").alert(){% endhighlight %} + +

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

+ {% highlight html %}×{% endhighlight %} + +

Methods

+ +

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

+ +

.alert('close')

Closes an alert.

+ {% highlight js %}$(".alert").alert('close'){% endhighlight %} + + +

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

+ + + + + + + + + + + + + + + + + +

Event Type	Description
close	This event fires immediately when the `close` instance method is called.
closed	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

{% highlight js %} $('#my-alert').bind('closed.bs.alert', function () { // do somethingâ¦

Methods

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('destroy')

Events

Methods

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('destroy')

Events

Popovers popover.js

Examples

Popovers popover.js

Plugin dependency

Popovers in button groups and input groups require special setting

Static popover

Popover top

Examples

Popover right

Plugin dependency

Popover bottom

Popovers in button groups and input groups require special setting

Popover left

Static popover

Popover top

Popover right

Live demo

Popover bottom

Four directions

Popover left

Usage

Live demo

Options

Data attributes for individual popovers

Four directions

Usage

Options

Data attributes for individual popovers

Markup

Methods

$().popover(options)

.popover('show')

Markup

Methods

$().popover(options)

.popover('show')

.popover('hide')

.popover('toggle')

.popover('destroy')

Events

.popover('hide')

.popover('toggle')

.popover('destroy')

Events

Alert messages alert.js

Alert messages alert.js

Example alerts

Oh snap! You got an error!

Example alerts

Oh snap! You got an error!

Usage

Markup

Methods

$().alert()

.alert('close')

Events

Usage

Markup

Methods

$().alert()

.alert('close')

Events