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.
Default tooltip with top placement Open in playground 
<.tooltip id="tooltip-single-default">
  <.tooltip_trigger>
    <.button variant="outline">Hover me</.button>
  </.tooltip_trigger>
  <.tooltip_content>
    <p>Hi! I'm a tooltip.</p>
  </.tooltip_content>
</.tooltip>
Tooltips with different placements Open in playground 
<.tooltip id="tooltip-placement-examples-top-placement">
  <.tooltip_trigger>
    <.button variant="outline">Top</.button>
  </.tooltip_trigger>
  <.tooltip_content side="top">
    <p>I appear on the top!</p>
  </.tooltip_content>
</.tooltip>
<.tooltip id="tooltip-placement-examples-right-placement">
  <.tooltip_trigger>
    <.button variant="outline">Right</.button>
  </.tooltip_trigger>
  <.tooltip_content side="right">
    <p>I appear on the right!</p>
  </.tooltip_content>
</.tooltip>
<.tooltip id="tooltip-placement-examples-bottom-placement">
  <.tooltip_trigger>
    <.button variant="outline">Bottom</.button>
  </.tooltip_trigger>
  <.tooltip_content side="bottom">
    <p>I appear at the bottom!</p>
  </.tooltip_content>
</.tooltip>
<.tooltip id="tooltip-placement-examples-left-placement">
  <.tooltip_trigger>
    <.button variant="outline">Left</.button>
  </.tooltip_trigger>
  <.tooltip_content side="left">
    <p>I appear on the left!</p>
  </.tooltip_content>
</.tooltip>
Tooltip with custom styling Open in playground 
<.tooltip id="tooltip-single-styled">
  <.tooltip_trigger>
    <.button variant="outline">Styled tooltip</.button>
  </.tooltip_trigger>
  <.tooltip_content class="bg-primary text-primary-foreground border-primary">
    <p>I have custom styling!</p>
  </.tooltip_content>
</.tooltip>
Tooltip with increased side offset Open in playground 
<.tooltip id="tooltip-single-with-offset">
  <.tooltip_trigger>
    <.button variant="outline">Offset tooltip</.button>
  </.tooltip_trigger>
  <.tooltip_content side="bottom" side-offset={12}>
    <p>I have more space from my trigger (12px)!</p>
  </.tooltip_content>
</.tooltip>
Tooltip with complex content Open in playground 
<.tooltip id="tooltip-single-complex-content">
  <.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>
</.tooltip>