Tooltip

Short hint displayed on hovering, focusing or touching an element. For structured content with title and description, use Popover.

When to use

✅ Use when…	🚫 Avoid when…
To clarify an icon or button whose meaning may be ambiguous. As a keyboard shortcut on menu items (`Cmd+K`). For short helper texts in forms.	For critical information — it does not appear on touchscreens and vanishes when focus is lost. For long content. Use `Popover`. For action feedback. Use `Notification`.

Positions

Tooltip accepts 8 positions — top/bottom/left/right and their -start/-end variants.

Interacting with the `Tooltip`

interactive keeps the tooltip open while the mouse is over it — allowing clickable content.

<Tooltip interactive content="You can select me">
  <Button size="small" text="Hello again" />
</Tooltip>

Positions — visual matrix

`Controlled` Tooltip

Use visible + onDismiss to control visibility externally. onDismiss is required when visible is provided.

import { Button } from '@apollion-dsi/core/elements/button';
import { Tooltip } from '@apollion-dsi/core/elements/tooltip';
import { useToggle } from '@apollion-dsi/core/hooks';
import { arrowRight, thumbsUp } from '@apollion-dsi/core/icons';
 
const { active, toggle, disable } = useToggle(true);
 
<Tooltip visible={active} onDismiss={disable} position="right" content="I am always visible">
  <Button onClick={toggle} size="small" text="Proceed" icon={<Icon icon={arrowRight} />} iconPosition="right" />
</Tooltip>;

Properties


Prop	Type	Default	Description
`children *`	`ReactNode`	—	Element the tooltip is anchored to. Strings are wrapped in `BaseText`.
`content *`	`ReactNode`	—	Tooltip content. Strings are wrapped in `BaseText` with the micro font.
`interactive`	`boolean`	—	Legacy no-op — kept only for API compatibility. In `vendors/TippyHeadless` this prop enabled Tippy's "interactive" mode. With `vendors/FloatingUI`, the floating tooltip is already inherently interactive (hover/focus over the tooltip itself does not trigger dismiss). Can be removed once consumers are cleaned up. @deprecated
`inverted`	`boolean`	—	Inverts the color scheme (light background instead of dark). Useful on already-dark surfaces where the dark tooltip would disappear.
`noArrow`	`boolean`	—	Hides the arrow pointing at the anchored element.
`onDismiss`	`(() => void)`	—	Called when the user clicks outside the tooltip. Required with `visible`.
`visible`	`boolean`	—	Controlled visibility. When set, `onDismiss` is required (the component throws if it is missing).

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

Theming — surface ladder

Tooltip sits on the surface ladder: the default ground is the primary ink (ink.primary) with the paper ink on it; inverted flips to surface.raised with ink.primary — both AA in either mode. The roles are mode-aware by construction — paper is lighter than the canvas in both light and dark — and every ink inside resolves against this ground through the ground channel. Override a role per polarity with createTheme({ colors: { ladder: … } }); see Dark Mode Engine.

Dropdown Popover