SaladUI.Tooltip (SaladUI v1.0.0)

Copy Markdown View Source

Implementation of Tooltip component for SaladUI framework.

Tooltips provide additional information about an element when hovering over it.

Examples:

<.tooltip id="help-tooltip">
  <.tooltip_trigger>
    <.button variant="ghost" size="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle h-4 w-4">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
        <path d="M12 17h.01"></path>
      </svg>
    </.button>
  </.tooltip_trigger>
  <.tooltip_content side="top" align="center">
    Need help? Click here for more information.
  </.tooltip_content>
</.tooltip>

Component events

  • :on-open - Maps the open event. Fired when the tooltip enters open state.
  • :on-close - Maps the close event. Fired when the tooltip enters closed state.

Tooltip is a pure client-side interaction (hover/focus driven) and does not support SaladUI.LiveView.send_command/4.

Summary

Functions

tooltip(assigns)

The main tooltip component that manages state and positioning.

tooltip_content(assigns)

The tooltip content that appears when triggered.

tooltip_trigger(assigns)

The trigger element that activates the tooltip when hovered.

Functions

tooltip(assigns)

The main tooltip component that manages state and positioning.

Options

  • :id - Unique identifier for the tooltip (optional, auto-generated if not provided).
  • :open-delay - Delay in milliseconds before opening the tooltip. Defaults to 150.
  • :close-delay - Delay in milliseconds before closing the tooltip. Defaults to 100.
  • :on-open - Handler for tooltip open event.
  • :on-close - Handler for tooltip close event.
  • :class - Additional CSS classes.

Component events

  • :on-open - Fired when the tooltip opens.
  • :on-close - Fired when the tooltip closes.

Attributes

  • id (:string) - Defaults to nil.
  • open-delay (:integer) - Delay in milliseconds before opening the tooltip. Defaults to 150.
  • close-delay (:integer) - Delay in milliseconds before closing the tooltip. Defaults to 100.
  • on-open (:any) - Handler for tooltip open event. Defaults to nil.
  • on-close (:any) - Handler for tooltip close event. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

tooltip_content(assigns)

The tooltip content that appears when triggered.

Options

  • :side - Placement of the tooltip relative to the trigger (top, right, bottom, left). Defaults to "top".
  • :align - Alignment of the tooltip (start, center, end). Defaults to "center".
  • :side-offset - Distance from the trigger in pixels. Defaults to 4.
  • :align-offset - Offset along the alignment axis. Defaults to 0.
  • :class - Additional CSS classes.

Attributes

  • class (:string) - Defaults to nil.
  • side (:string) - Defaults to "top". Must be one of "top", "right", "bottom", or "left".
  • align (:string) - Defaults to "center". Must be one of "start", "center", or "end".
  • side-offset (:integer) - Distance from the trigger in pixels. Defaults to 8.
  • align-offset (:integer) - Offset along the alignment axis. Defaults to 0.
  • Global attributes are accepted.

Slots

  • inner_block (required)

tooltip_trigger(assigns)

The trigger element that activates the tooltip when hovered.

If not provided, the first child of the tooltip will be used as trigger.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)