Tooltip

A small bubble of explanatory text. The class paints the bubble and nothing else: a CSS-only tooltip anchors with a pseudo-element, and Kobalte positions a portaled Content with its popper.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`tooltip-content`	The bubble: inverted surface, small text
`tooltip-arrow`	Colour for Kobalte's arrow, which draws itself in currentColor

Basic

<button class="btn">Save</button>
<span class="tooltip-content" style="display: inline-block; margin-left: 0.5rem">Saves and closes</span>

<button class="btn">Save</button>
<span class="tooltip-content" style="display: inline-block; margin-left: 0.5rem">Saves and closes</span>

import { Tooltip } from "@kobalte/core/tooltip";

<Tooltip>
  <Tooltip.Trigger class="btn">Save</Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>
      Saves and closes
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip>

<button class="btn" aria-describedby="tip">Save</button>
<div role="tooltip" id="tip" data-expanded style="display: inline-block; margin-left: 0.5rem">Saves and closes</div>

The demo places the bubble inline so it is visible without a hover. In an app Kobalte's popper positions it, and data-expanded tells you when it is open if you want to animate it.