Popover Positioning

The Popover allows you to adjust its position according to its anchor element. To change the position, use the position option to place the Popover above, below or on either side of the anchor element.

The position options accepts the following values:

• right (Default)—Positions the popover on the right side of the anchor element.
• left—Positions the popover on the left side of the anchor element.
• top—Positions the popover on top of to the anchor element.
• bottom—Positions the popover on bottom in respect to the anchor element.

If the Popover cannot fit in the available space between the anchor element and the viewport boundary, it will be automatically adjusted so that the whole content is rendered on the screen.

The following example demonstrates the different positioning options in action.

Suggested Links

• API Reference of the Popover