Salad UI

Tooltip

The main tooltip component that manages state and positioning.

Read more Read less

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.
Attribute Type Documentation Default Value
id :string
open-delay :integer

Delay in milliseconds before opening the tooltip
150
close-delay :integer

Delay in milliseconds before closing the tooltip
100
on-open :any

Handler for tooltip open event
on-close :any

Handler for tooltip close event
class :string
rest :global
Required inner_block * :slot 
<.tooltip_trigger>
  <.button variant="outline">Complex tooltip</.button>
</.tooltip_trigger>
<.tooltip_content class="p-0 overflow-hidden">
  <div>
    <div class="bg-muted p-3 font-medium border-b">Tooltip Header</div>
    <div class="p-3">
      <p>Tooltips can contain complex content including:</p>
      <ul class="list-disc pl-4 mt-2 space-y-1">
        <li>Multiple paragraphs</li>
        <li>Lists</li>
        <li>Other components</li>
      </ul>
    </div>
  </div>
</.tooltip_content>