Bootstrap Popover Plugin in Bootstrap

What is Popover Plugin in Bootstrap?

The popover is alike to tooltip, contributing a prolonged view complete with a heading. For the popover to make active, an operator just wants to hover the cursor over the element. The content of the popover can be occupied completely using the Bootstrap Data API. This technique requires a tooltip.

If you need to contain this plugin functionality separately, then you will need the popover.js and it has a reliable of the tooltip plugin. Otherwise, as stated in the section Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

The popover plugin produces content and markup on demand, and by default places popover after their trigger element. You can add popover in the following two ways −

  • Via data attributes − to complement a popover, add data-toggle = "popover" to an anchor/button tag. The title of the anchor will be the text of a popover. By default, popover is set to top by the plugin.

  • Via JavaScript − Allow popovers via JavaScript by means of the next syntax –

Popover plugin is NOT only-css plugins alike dropdown or other plugins debated in earlier sections. To use this plugin you MUST trigger it using jquery (read javascript). To allow all the popovers on your page just use this script −


Instance

The following instance shows the use of popover plugin via data attributes.

Popover


Options


There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript. Following table lists the options −

Option Name

Type/Default Value

Data attribute name

Description

Animation

booleanDefault − true

data-animation

Applies a CSS fade transition to the popover.

Html

booleanDefault − false

data-html

Inserts 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|functionDefault − top

data-placement

Specifies how to position the popover (i.e., top|bottom|left|right|auto).

Whenautois 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

stringDefault − false

data-selector

If a selector is provided, popover objects will be delegated to the specified targets.

Title

string | functionDefault − "

data-title

The title option is the default title value if thetitleattribute isn’t present.

Trigger

stringDefault − 'hover focus'

data-trigger

Defines how the popover is triggered −click| hover | focus | manual. You may pass multiple triggers; separate them with a space.

Delay

number | objectDefault − 0

data-delay

Delays showing and hiding the popover in 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 | falseDefault − false

data-container

Appends the popover to a specific element. Example: container: 'body'

Methods

The resulting are some handy methods for popover –

Method

Description

Example

Options− .popover(options)

Attaches a popover handler to an element collection.

$().popover(options)
            

Toggle− .popover('toggle')

Toggles an element's popover.

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

Show− .popover('show')

Reveals an element's popover.

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

Hide− .popover('hide')

Hides an element's popover.

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

Destroy− .popover('destroy')

Hides and destroys an element's popover.

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

Example

The next instance shows the popover plugin methods –


popover title

Events


Resulting table lists the actions to work with the popover plugin. This occurrence may be used to hook into the function.

Event

Description

Example

show.bs.popover

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

$('#mypopover').on('show.bs.popover', function () {
            
 // do something
            
})
            

shown.bs.popover

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

$('#mypopover').on('shown.bs.popover', function () {
            
 // do something
            
})
            

hide.bs.popover

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

$('#mypopover').on('hide.bs.popover', function () {
            
 // do something
            
})
            

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

Example

The next example shows the Popover plugin events –


Popover left



All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics