Popover

Popovers provide a contextual space attached to an element in an upper z-index layer where you can include any kind of HTML code related to the trigger.

Examples

Popover with custom content

Popovers can be used to display any kind of custom content (even other components).

Web Component

JavaScript

This component accepts options to configure its behavior.

Option	Default	Description
`animate`	`true`	Enables animation on popover display and hide.
`content`	`null`	Lets the developer include the popover content programmatically on the creation phase.
`position`	`'top'`	Where the popover will be located by default. If there is no free space in that position, the popover will try to flip the position to the opposite side. `data-position` takes precedence over this configuration option.
`arrow`	`true`	If set to true, an arrow will appear between the popover and the trigger element.
`parent`	`null`	If an element is provided as parent, the popover will be attached visually to that element. If not, the popover will be attached to the trigger used in instantiation.
`classes`	`[]`	Lets the developer add any classes to the popover element in the creation phase.
`trigger`	`'click'`	Available options are `click` or `manual`. Use click to attach the toggle action to the trigger element, and manual for develop a custom solution.
`target`	`'null'`	If you specify a target, the Popover will be build over that Element. You can specify the xpath selector of the element or the element itself.
`preventAutoHide`	`false`	Set `preventAutoHide` to `true` to prevent hidding the popover when clicking outside the popover.

Methods

.setContent()

Use this method to change the content of the popover. It discards any previously attached content, so any resources attached to the content should be removed to prevent memory leaks. This method accepts a string or an HTML DOM Element as a parameter.

Events

Event	Description
`chiPopoverShow`	Popover show has been triggered, but the showing animation has not started yet.
`chiPopoverHide`	Popover hide has been triggered, but the closing animation has not started yet.
`chiPopoverShown`	Popover has been shown to the user and is fully visible. The animation has completed.
`chiPopoverHidden`	Popover has been hidden to the user. The animation has completed.

Preventing memory leaks

Popover components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

It is safe to call the popover method more than once, as it will return any previously created popover component associated with the trigger.

Accessibility

Accessibility guidelines coming soon