Search within TutorialsPark

Twitter Bootstrap Popovers


To create iPad style popovers with heading and extended view


Twitter Bootstrap: Popover Example

1. A popover is similar to a tooltip, but offers an extended view with an heading just like popovers in an iPad.

2. The contents within the popover is specified using the Data API attribute data-content .

3. Javascript is used to trigger popovers using method popover() with ID or class used to hook to the DOM

Example: Twitter Bootstrap Popovers using Javascript

Give it a TRY! »

Twitter Bootstrap: Popovers Positioning using Javascript

1. The position of the popover is set using the attribute data-placement="..."

2. Another way is to use Javascript method $().popover({placement: '...'}). The values possible are left | right | top | bottom .

Example:Twitter Bootstrap Positioning Popups Using Javascript

Give it a TRY! »

Twitter Bootstrap: Popover Options - title using Javascript

Table:Twitter Bootstrap Popover Options titles

Name Type Default Description
animation boolean true To apply a fade transition to popover using CSS
html boolean false To insert HTML elements within the popover
placement string|
function
'top' To set the position of the tooltip - top | bottom | left | right | auto. The value auto lets the browser reorient the popover dynamically
selector string false Delegate popover objects to specific targets
title string|
function
'' Default value of title incase the title attribute is not present
trigger string 'hover
focus'
To set the trigger mechanism of popover - click | hover | focus | manual. Mutiple values can be passed seperated by a space
delay number|
object
0 To insert delay before popover is showed or hidden.
container string | false false To append the popover to a specific element

1. Options can be passed to the popover using both data-attributes or Javascript.

2. When using data attributes, append the option name to data- eg data-placement="left" .

Example:Twitter Bootstrap Popover options using Javascript

Give it a TRY! »

Twitter Bootstrap: Popover Javascript Method $().popover(options)

1.Inorder to initialize popovers for an element collection use method $().popover(options).

Example:Twitter Bootstrap Method $().popover(options)

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().popover('show')

1. To show or reveal an elements popover.

Example:Twitter Bootstrap $().popover('show')

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().popover('hide')

1. To hide an elements popover.

Example:Twitter Bootstrap $().popover('hide')

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().popover('toggle')

1. To toggle an elements popover.

Example:Twitter Bootstrap $().popover('toggle')

Give it a TRY! »

Twitter Bootstrap: Popover Javascript Method $().popover('destroy')

1. To hide an destroy an element tooltip.

Example:Twitter Bootstrap $().popover('destroy')

Give it a TRY! »

Twitter Bootstrap: Popover Events using Javascript

Table:Twitter Bootstrap Popover Events

Event Type Description
show.bs.popover The event is fired immediately when the show instance method is invoked.
shown.bs.popover The event is fired when the popover is show to the user(CSS delays are considered).
hide.bs.popover The event is fired immediately when the hide instance method is invoked.
hidden.bs.popover Fired immediately when the popover gets hidden.

1.Bootstrap's popover has four events which can be hooked using javascript events.

Example:Twitter Bootstrap Popover Events

Give it a TRY! »