Tooltip

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

Requires JS

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

Tooltip do |t|
  t.trigger
  t.content
end

Name	Type	Default
`open:`	`boolean`	`false`
Whether the tooltip should be open by default when initially rendered.
`attributes`	`keyword arguments`

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges tooltip trigger behavior with a custom element passed as block content instead of rendering a default div wrapper.
`attributes`	`keyword arguments`

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

On This Page