#### Components - Popups

Statistics Invoices Schedule

##### Tooltip component

Tooltip is a small text block with information about the item being hovered, clicked or focused on. Bootstrap tooltip extensions supports four alignment options: `top`, `right`, `bottom` and `left`. The tooltip plugin generates content and markup on demand, and by default places tooltips `after` their trigger element. The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip.

Top tooltip data-placement="top"

Some tooltip text!

Right tooltip data-placement="right"

Some tooltip text!

Bottom tooltip data-placement="bottom"

Some tooltip text!

Left tooltip data-placement="left"

Some tooltip text!

##### Tooltip examples

Tooltip positions
Left tooltip position |  | Tooltip in `left` direction. To use, add `data-placement="left"` to the tooltip element
Top tooltip position |  | Tooltip in `left` direction. To use, add `data-placement="left"` to the tooltip element
Right tooltip position |  | Tooltip in default `top` direction, `data-placement="top"` is optional
Bottom tooltip position |  | Tooltip in `bottom` direction. To use, add `data-placement="bottom"` to the tooltip element
Tooltip options
Click trigger |  | Tooltip triggered on `click`. To use, add `data-trigger="click"` to the tooltip element. To hide tooltip, click the same button again
Focus trigger |  | Tooltip triggered on `focus`. To use, add `data-trigger="focus"` to the tooltip element. To hide tooltip, click outside the button
HTML support |  | Tooltip with `HTML` support enabled. If `false`, jQuery's text method will be used to insert content into the DOM
Disabled animation |  | Add or remove a CSS `fade` transition to the tooltip by setting `data-animation` to `true`(default) or `false`
Delayed tooltip |  | Delay showing and hiding the tooltip in `ms`. If a number is supplied, delay is applied to both hide/show
Custom color |  | Tooltips support custom color styling through `template` option. To use, wrap `.tooltip-arrow` and `.tooltip-inner` in the div with a custom color class
Tooltip events
Show event |  | Example of a `show` event. This event fires immediately when the `show` instance method is called
Shown event |  | Example of a `shown` event. This event is fired when the tooltip has been made visible to the user
Hide event |  | Example of a `hide` event. This event is fired immediately when the `hide` instance method has been called
Hidden event |  | Example of a `hidden` event. This event is fired when the tooltip has finished being hidden from the user
Tooltip methods
Show method |  | Example of a `show` method. This method reveals an element's tooltip. Tooltips with zero-length titles are never displayed
Hide method |  | Example of a `hide` method. This method hides an element's tooltip. Hover on `Target` button and then click `play` button to hide a tooltip
Toggle method |  | Example of a `toggle` method. This method toggles an element's tooltip. Click on `play` button to toggle `Target` button tooltip
Destroy method |  | Example of a `destroy` method. This method hides and destroys an element's tooltip. Click on `Target` button and then `play` button to destroy a tooltip

##### Popover component

Popover is a small container with content that hovers over its parent element. Since popovers are built on top of tooltip plugin, it is required to include both of them. Popover supports all availbale tooltip options, but has a different template - title, content and arrow. Bootstrap popover extension supports four alignment options: `top`, `right`, `bottom` and `left`. The popover plugin generates content and markup on demand, and by default places tooltips `after` their trigger element.

Top popover data-placement="top"

### Popover top

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

Right popover data-placement="right"

### Popover right

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

Bottom popover data-placement="bottom"

### Popover bottom

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

Left popover data-placement="left"

### Popover left

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

##### Popover examples

Popover positions
Left popover position |  | Popover in `left` direction. To use, add `data-placement="left"` to the popover element.
Top popover position |  | Popover in `top` direction. To use, add `data-placement="top"` to the popover element.
Right popover position |  | Popover in default `right` direction, `data-placement="right"` is optional.
Bottom popover position |  | Popover in `bottom` direction. To use, add `data-placement="bottom"` to the popover element.
Popover options
Hover trigger |  | Popover triggered on `hover`. To use, add `data-trigger="hover"` to the popover element.
Focus trigger |  | Popover triggered on `focus`. To use, add `data-trigger="focus"` to the popover element. To hide popover, click outside the button.
HTML support |  | Popover with `HTML` support enabled. If `false`, jQuery's text method will be used to insert content into the DOM.
Disabled animation |  | Add or remove a CSS `fade` transition to the popover by setting `data-animation` to `true` (default) or `false`.
Delayed popover |  | Delay showing and hiding the popover in `ms`. If a number is supplied, delay is applied to both hide/show.
Custom header color |  | Popovers support custom `title` color styling through `template` option. To use, add custom color class to `.popover-title` element.
Custom solid color |  | Besides title, popovers also support a `solid` color fill option. To use, add custom color class to `.popover-title` and `.popover-content` elements.
Popover events
Show event |  | Example of a `show` event. This event fires immediately when the `show` instance method is called.
Shown event |  | Example of a `shown` event. This event is fired when the popover has been made visible to the user.
Hide event |  | Example of a `hide` event. This event is fired immediately when the `hide` instance method has been called.
Hidden event |  | Example of a `hidden` event. This event is fired when the popover has finished being hidden from the user.
Popover methods
Show method |  | Example of a `show` method. This method reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
Hide method |  | Example of a `hide` method. This method hides an element's popover. Hover on `Target` button and then click `play` button to hide a popover.
Toggle method |  | Example of a `toggle` method. This method toggles an element's popover. Click on `play` button to toggle `Target` button popover.
Destroy method |  | Example of a `destroy` method. This method hides and destroys an element's popover. Click on `Target` button and then `play` button to destroy a popover.