Corex.Tooltip (Corex v0.1.0-beta.5)

View Source

Phoenix implementation of Zag.js Tooltip.

Examples

Basic

<.tooltip id="my-tooltip">
  <:trigger>Hover me</:trigger>
  <:content>Tooltip content</:content>
</.tooltip>

Multiple triggers (Zag)

One tooltip content, several triggers. Each value must be a stable non-empty string and unique within the component.

<.tooltip id="shared-tip" show_arrow={false}>
  <:trigger value="a">First anchor</:trigger>
  <:trigger value="b">Second anchor</:trigger>
  <:content>Same panel for both triggers</:content>
</.tooltip>

For multi-trigger tooltips whose <:content> should follow the active trigger in LiveView, set on_trigger_value_change to a handle_event/3 name and update assigns used inside <:content> (see the e2e Tooltip · Pattern page).

Without arrow

<.tooltip id="my-tooltip" show_arrow={false}>
  <:trigger>Hover me</:trigger>
  <:content>No arrow</:content>
</.tooltip>

API Control

Use an id on the component for API control.

Client-side

<button phx-click={Corex.Tooltip.set_open("my-tooltip", true)}>
  Open tooltip
</button>

Server-side

def handle_event("open_tooltip", _, socket) do
  {:noreply, Corex.Tooltip.set_open(socket, "my-tooltip", true)}
end

Styling

Target parts with data-scope="tooltip" and data-part:

[data-scope="tooltip"][data-part="trigger"] {}
[data-scope="tooltip"][data-part="positioner"] {}
[data-scope="tooltip"][data-part="content"] {}
[data-scope="tooltip"][data-part="arrow"] {}

Trigger and content have data-state="open" or data-state="closed".

On the root element, optional modifier classes:

  • tooltip--{semantic} - surface and ink (for example tooltip--accent, tooltip--brand)
  • tooltip--size-{sm|md|lg|xl} - max width, padding, and arrow scale
  • tooltip--text-{scale} - content font size only (for example tooltip--text-sm, tooltip--text-xl)

Summary

Components

tooltip(assigns)

API

set_open(tooltip_id, open)
set_open(socket, tooltip_id, open)

Components

tooltip(assigns)

Attributes

  • id (:string) - The id of the tooltip, useful for API to identify the tooltip.
  • disabled (:boolean) - Whether the tooltip is disabled. Defaults to false.
  • dir (:string) - The direction of the tooltip. When nil, derived from document. Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Layout orientation for CSS. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • open_delay (:integer) - Delay in ms before opening. Default from Zag is 400. Defaults to 0.
  • close_delay (:integer) - Delay in ms before closing. Default from Zag is 150. Defaults to 0.
  • positioning (Corex.Positioning) - Positioning options for the floating content. Defaults to %Corex.Positioning{hide_when_detached: true, strategy: "fixed", placement: "bottom", gutter: 8, shift: 0, overflow_padding: 0, arrow_padding: 4, flip: true, slide: true, overlap: false, same_width: false, fit_viewport: true, offset: nil}.
  • close_on_escape (:boolean) - Whether to close on Escape. Default true. Defaults to true.
  • close_on_click (:boolean) - Whether to close on click. Default true. Defaults to true.
  • close_on_pointer_down (:boolean) - Whether to close on pointer down on the trigger. Default false. Defaults to false.
  • close_on_scroll (:boolean) - Whether to close on scroll. Default false. Defaults to false.
  • interactive (:boolean) - Whether the tooltip content is interactive (stays open when hovering content). Defaults to true.
  • on_open_change (:string) - The server event name when the open state changes. Defaults to nil.
  • on_open_change_client (:string) - The client event name when the open state changes. Defaults to nil.
  • on_trigger_value_change (:string) - LiveView event when the active trigger value changes (multi-trigger). Params include id (tooltip root) and value (trigger value string). Defaults to nil.
  • show_arrow (:boolean) - Whether to show an arrow pointing to the trigger. Defaults to true.
  • trigger_tag (:atom) - Use :span when the tooltip sits inside another button-like control (e.g. tree view row) to avoid nested <button> elements. Defaults to :button. Must be one of :button, or :span.
  • Global attributes are accepted.

Slots

  • trigger (required) - Trigger element content. Use :let={tooltip} for assigns such as disabled. With more than one <:trigger>, each must set value="…" (unique, stable across LiveView patches). Accepts attributes:
    • class (:string)
    • value (:string)
  • content (required) - Tooltip content. Use :let={tooltip} for assigns such as disabled. Accepts attributes:
    • class (:string)

API

set_open(tooltip_id, open)

set_open(socket, tooltip_id, open)