# Popover

Popover is similar to tooltips; it is a pop-up box that appears when user click or hover on an element.

## Popover On Click

To make the Popover open on click, use `data-trigger="click"`. To specify the direction of Popover use attribute `data-placement` with `left`, `right`, `top`, and `bottom` values.

Popover on Click with Title. Use attribute `title` to add title to the Popover.

## Popover On Hover

To make your Popover open on hover, use `data-trigger="hover"`.

Popover on hover with Inline HTML. Use attribute `data-html="true"` to add inline HTML to the Popover.

HTML for left popover

HTML for right popover

HTML for bottom popover

HTML for top popover

Popover on hover with External HTML. Use attribute `title` to add external HTML to the Popover.

Popover on hover with contextual color option. Use attribute `data-color` to add external HTML to the popover. For example: `data-color="success"` adds green color to the Popover.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Popover. The table lists the available classes and their effects.

Propeller Classes | Effect | Remark
--- | --- | ---
`.popover-html` | To load dynamic HTML inside Popover | Optional

HTML Attributes | Effect | Value
--- | --- | ---
`data-toggle` | To initialize Popover | Popover
`data-trigger` | Defines how the Popover opens. | hover, Click
`data-placement` | Defines the position of Popover vertically and horizontally. | left, right, top, bottom
`data-content` | Defines content of the Popover. | text, HTML
`data-html` | Required when your Popover contains HTML in it. | true, false
`data-id` | To load outer HTML | HTML element ID
`data-original-title` | Defines the title content of Popover. | text
`data-color` | Used for colored Popover. | primary, default, success, danger, info, warning

## Events

See here for more documentation on this.

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).
`inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the Popover template has been added to the DOM.