Concorde UI component — Tooltip. sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, l Doc ID: core/components/ui/tooltip/tooltip. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right. URL: https://concorde.supersoniks.org/core/components/ui/tooltip.

Tooltip

sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, like disabled.

Basic example

<sonic-tooltip label="Cruising at Mach 2.04">
      <sonic-button variant="outline">Hover me</sonic-button>
    </sonic-tooltip>

Placement

top · bottom · left · right set the side. Add -start or -end to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.

<div class="flex flex-wrap gap-3">
      <sonic-tooltip placement="top" label="top"><sonic-button minWidth="9rem">top</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="top-start" label="top-start"><sonic-button minWidth="9rem">top-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="top-end" label="top-end"><sonic-button minWidth="9rem">top-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom" label="bottom"><sonic-button minWidth="9rem">bottom</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom-start" label="bottom-start"><sonic-button minWidth="9rem">bottom-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom-end" label="bottom-end"><sonic-button minWidth="9rem">bottom-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left" label="left"><sonic-button minWidth="9rem">left</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left-start" label="left-start"><sonic-button minWidth="9rem">left-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left-end" label="left-end"><sonic-button minWidth="9rem">left-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right" label="right"><sonic-button minWidth="9rem">right</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right-start" label="right-start"><sonic-button minWidth="9rem">right-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right-end" label="right-end"><sonic-button minWidth="9rem">right-end</sonic-button></sonic-tooltip>
    </div>

Multiline label

Line breaks in label (a real newline or 
) are kept. Each line is trimmed and the bubble wraps at 18rem.

<sonic-tooltip label="Gate B12&#10;Boarding at 08:15">
      <sonic-button variant="outline">Multiline label</sonic-button>
    </sonic-tooltip>

Focusable

Set focusable when the trigger is not focusable itself (text, icon): the host gets tabindex="0" so keyboard users can open the tooltip. The bubble uses popover="hint"; without Popover API support, the label falls back to a native title on one line.

<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 this text
    </sonic-tooltip>

Disabled

disabled never shows the bubble and sets tabindex="-1" on the host.

<sonic-tooltip disabled label="Not shown">
      <sonic-button>Tooltip disabled</sonic-button>
    </sonic-tooltip>

API reference