Hover Card

For sighted users to preview content available behind a link.

Requires JS

This component requires the hover_card 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

HoverCard do |h|
  h.trigger
  h.content
end

Name	Type	Default
`open:`	`boolean`	`false`
Controls the initial open state of the hover card. When true, the card 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. Options: `:top \| :left \| :bottom \| :right`
`align:`	`symbol`	`:center`
Controls the alignment of the content relative to the trigger. Options: `:start \| :center \| :end`
`attributes`	`keyword arguments`

Key	Description
Tab	Opens/closes the hover card.
Esc	Closes the hover card.

On This Page