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

View Source

Phoenix implementation of Zag.js Tooltip.

Examples

Basic

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

Without arrow

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

Controlled

<.tooltip
  id="my-tooltip"
  controlled
  open={@tooltip_open}
  on_open_change="tooltip_changed">
  <:trigger>Hover me</:trigger>
  <:content>Tooltip content</: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".

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.
  • open (:boolean) - The initial open state or the controlled open state. Defaults to false.
  • controlled (:boolean) - Whether the tooltip is controlled. In LiveView, on_open_change is required when true. Defaults to false.
  • disabled (:boolean) - Whether the tooltip is disabled. Defaults to false.
  • dir (:string) - The direction of the tooltip. When nil, derived from document. Defaults to "ltr". Must be one of "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.
  • placement (:string) - Placement of the tooltip (e.g. bottom, top-start). Uses floating-ui. Defaults to "bottom".
  • 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. Default true. 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.
  • 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 open state. Accepts attributes:
    • class (:string)
  • content (required) - Tooltip content. Use :let={tooltip} for open state. Accepts attributes:
    • class (:string)

API

set_open(tooltip_id, open)

set_open(socket, tooltip_id, open)