Renders a tooltip component
Open Sidebar
ID of the element the tooltip is for.
Placement of the tooltip.
The target parent element to move the tooltip to.
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.
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:
content_id
: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>