View Source SaladUI.Tooltip (SaladUI v1.0.0-beta.3)

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>

Summary

Functions

The main tooltip component that manages state and positioning.

The tooltip content that appears when triggered.

The trigger element that activates the tooltip when hovered.

Functions

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.

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)
Link to this function

tooltip_content(assigns)

View Source

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".
  • align (:string) - Defaults to "center".
  • 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)
Link to this function

tooltip_trigger(assigns)

View Source

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)