intro

Tooltip

A molecule component for context-sensitive, non-essential supplementary information triggered on hover or focus.

The Tooltip molecule displays brief, non-essential supplementary information when users hover or focus on a target element.

Accessibility First: Tooltips inherently manage aria-describedby logic for you, ensuring screen readers announce the tooltip content appropriately without stealing focus. The props must be spread to the inner interactive element.

Curva & Concreto: Because the tooltip presents static, non-interactive text, it adheres to the “Concreto” doctrine with a 0px border-radius, distinguishing it from interactive elements.

Anatomy

Tooltips wrap their target element using a Snippet and absolutely position a pop-over relative to the wrapper. They automatically manage hover (mouseenter/mouseleave) and focus (focusin/focusout) states, passing an aria-describedby prop to apply directly onto your focusable element. They also meet WCAG 1.4.13 requirements: they can be dismissed with the Escape key, and the tooltip itself is hoverable without disappearing.

<script>
  import Tooltip from 'cobogo/components/Tooltip';
  import Button from 'cobogo/components/Button';
</script>

<Tooltip content="Provides extra context" position="top">
  {#snippet children(props)}
    <!-- Spread the props onto the element that receives focus so screen readers announce it -->
    <Button {...props} variant="secondary">Hover me</Button>
  {/snippet}
</Tooltip>

Positions

The position prop accepts 'top', 'bottom', 'left', or 'right'. The default is 'top'.

<Tooltip content="Top tooltip" position="top">
  {#snippet children(props)}<Button {...props}>Top</Button>{/snippet}
</Tooltip>

<Tooltip content="Bottom tooltip" position="bottom">
  {#snippet children(props)}<Button {...props}>Bottom</Button>{/snippet}
</Tooltip>

<Tooltip content="Left tooltip" position="left">
  {#snippet children(props)}<Button {...props}>Left</Button>{/snippet}
</Tooltip>

<Tooltip content="Right tooltip" position="right">
  {#snippet children(props)}<Button {...props}>Right</Button>{/snippet}
</Tooltip>

Snippet Content

If you need more complex formatting inside the tooltip, you can pass a Svelte Snippet via the content prop instead of a standard string.

<script>
  import Tooltip from 'cobogo/components/Tooltip';
</script>

{#snippet richContent()}
  <strong>Important:</strong> Please read before proceeding.
{/snippet}

<Tooltip content={richContent}>
  {#snippet children(props)}
    <button {...props}>Hover for details</button>
  {/snippet}
</Tooltip>