Tooltip and Popover components for Pure Admin.
Tooltips use CSS-only positioning via pa-tooltip class with data-tooltip attribute.
Popovers use a click-triggered rich content overlay.
Summary
Functions
Renders a popover trigger with rich content overlay.
Renders a tooltip wrapper around content.
Functions
Renders a popover trigger with rich content overlay.
Uses a click-triggered pattern with CSS positioning.
Examples
<.popover title_text="Help" placement="bottom">
<p>Rich content with <strong>HTML</strong>.</p>
</.popover>
<.popover title_text="Options" placement="bottom" size="lg">
<:trigger>
<.button variant="info" size="xs">Help</.button>
</:trigger>
<p>Detailed help content.</p>
</.popover>Attributes
id(:string) - Unique ID (auto-generated if not provided). Defaults tonil.title_text(:string) (required)placement(:string) - Defaults to"top". Must be one of"top","end","bottom", or"start".size(:string) - Defaults tonil.Must be one ofnil,"sm", or"lg".alignment(:string) - Defaults tonil.Must be one ofnil,"center", or"end".trigger_text(:string) - Default trigger button text. Defaults to"?".class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
trigger- Custom trigger content.inner_block(required)
Renders a tooltip wrapper around content.
The tooltip text appears on hover via CSS ::before/::after pseudo-elements.
Examples
<.tooltip text="Save your changes">
<.button variant="primary">Save</.button>
</.tooltip>
<.tooltip text="Tooltip on bottom" position="bottom" variant="success">
Hover me
</.tooltip>
<.tooltip text="Long explanation text..." multiline>
Hover for details
</.tooltip>Attributes
text(:string) (required) - Tooltip text.position(:string) - Tooltip position: top (default), end (right in LTR), bottom, start (left in LTR). Defaults tonil. Must be one ofnil,"top","end","bottom", or"start".variant(:string) - Color variant (primary, success, warning, danger, color-1 through color-9). Defaults tonil.multiline(:boolean) - Multiline tooltip (wider, left-aligned). Defaults tofalse.is_help(:boolean) - Help cursor (question mark). Defaults tofalse.is_inline(:boolean) - Inline text style with dotted underline. Defaults tofalse.is_keyword(:boolean) - Dotted underline + help cursor for inline term explanations. Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)