Popover

Displays rich content in a portal, triggered by a button.

Requires JS

This component requires the popover stimulus controller.

Caveats

When using as_child: true, it sanitizes the output of the child element's children with Rails sanitize helper.

To allow more tags or attributes, edit Base#sanitize_as_child according to your preference.

Anatomy

Popover do |p|
  p.trigger
  p.content
end

Name	Type	Default
`open:`	`boolean`	`false`
Controls the initial open state of the popover. When true, the popover content will be visible on render.
`attributes`	`keyword arguments`

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges the trigger functionality with the child element instead of creating a wrapper div.
`attributes`	`keyword arguments`

Name	Type	Default
`side:`	`symbol`	`:bottom`
Controls which side of the trigger the content appears on. `:top \| :left \| :bottom \| :right`
`align:`	`symbol`	`:center`
Controls the alignment of the content relative to the trigger. `:start \| :center \| :end`
`attributes`	`keyword arguments`

Key	Description
Space	Opens/closes the popover.
Enter	Opens/closes the popover.
Tab	Moves focus to the next focusable element.
Shift+Tab	Moves focus to the previous focusable element.
Esc	Closes the popver and moves focus to trigger.

On This Page