Concorde UI component — Tooltip. By default, tooltip is centered next to its content Doc ID: core/components/ui/tooltip/tooltip. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html.

Tooltip

<sonic-tooltip label="Tada : Text appears">hover me</sonic-tooltip>

Placement

By default, tooltip is centered next to its content

<sonic-tooltip placement="top" label="Top text">
      <sonic-button>Top</sonic-button>
    </sonic-tooltip>
    <sonic-tooltip placement="bottom" label="Bottom text">
      <sonic-button>Bottom</sonic-button>
    </sonic-tooltip>
     <sonic-tooltip placement="right" label="Right text">
      <sonic-button>Right</sonic-button>
    </sonic-tooltip>
    <sonic-tooltip placement="left" label="Left text">
      <sonic-button>Left</sonic-button>
    </sonic-tooltip>

More placement

<div class="flex gap-3 flex-wrap">
      <sonic-tooltip placement="top-start" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top start</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="top-end" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top end</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="bottom-start" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom start</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="bottom-end" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom end</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="right-start" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right start</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="right-end" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right end</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="left-start" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left start</sonic-button>
      </sonic-tooltip>
      <sonic-tooltip placement="left-end" label="My tooltip">
        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left end</sonic-button>
      </sonic-tooltip>
    </div>

Focusable

<sonic-tooltip focusable label="The Concorde made its first transatlantic crossing on September 26, 1973">
      <sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon> Focus or hover non interactive element 
    </sonic-tooltip>

Disabled

<sonic-tooltip disabled label="Disabled text">
      <sonic-button>Tooltip disabled</sonic-button>
    </sonic-tooltip>