Tooltip

Renders a tooltip component

Attribute Type Documentation Default Value
Required for * :string

ID of the element the tooltip is for.

placement :string

Placement of the tooltip.

"top"
portal_target :string

The target parent element to move the tooltip to.

Read more Read less
"body"

Tooltips are wrapped in a LiveView <.portal> tag to circumvent stacking context issues (see LV docs).

Within our application, THE DEFAULT SHOULD BE FINE. However, so far it is useful for Storybook.

rest :global
Required inner_block * :slot

Content rendered inside the tooltip.

When the tooltip contains nested components, assign content_id to ensure LiveView keeps the DOM stable across portal rerenders. Access it via :let:

<.tooltip for="trigger" :let={%{content_id: id}}>
  <.p id={id}>Actions</.p>
</.tooltip>

For plain text, no id is needed:

<.tooltip for="trigger">
  Simple text
</.tooltip>
<.p size="base">Open Sidebar</.p>