Marble UI
← Components

Toggle Tip

Preview: Inline

Click/tap info tip (the accessible alternative to a hover tooltip for important help): a small "?" or "i" button that opens a non-modal popover dialog. Works with touch and keyboard.

Import

import { ToggleTip } from '@marbleui/ui'

Props

<ToggleTip>

PropTypeDefaultDescription
children *requiredReactNode—
labelstring—
placement'bottom' | 'top' | 'left' | 'right''top'
titleReactNode—
variant'info' | 'help''help'

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Dialog · React Aria DialogTrigger · React Aria Heading. Follow the primitive's docs for the full keyboard map.

Usage notes

A small “?” or “i” button that shows help text in a popover when clicked, tapped or activated with the keyboard. Use it instead of Tooltip when the text matters or must work on touch; use Popover for interactive content.

<span className="flex items-center gap-1">
  Seats billed
  <ToggleTip title="How seats work" label="About seats">You pay for active members each month. Guests are free.</ToggleTip>
</span>
  • variant="help" (default) shows a question mark, variant="info" an “i”. The button is named “Help” or “Information” unless you pass label; give each tip its own label when a page has several.
  • title names the popover dialog; without it the dialog takes the button’s name (“Help”, “Information” or label).
  • Opening moves focus into the popover; Escape or clicking outside closes it and focus returns to the button. placement is top (default), bottom, left or right.
Example source · show
import { TextField } from '../text-field'
import { ToggleTip } from './toggle-tip'

export const styles = {
  Inline: () => <p className="flex items-center gap-1 text-sm text-fg">Seats billed <ToggleTip title="How seats work">You pay for active members each month. Guests and viewers are free.</ToggleTip></p>,
  'In a label': () => <TextField className="w-72" label={<span className="flex items-center gap-1">API key name <ToggleTip variant="info">Only you and admins can see key names.</ToggleTip></span>} />,
}

Source: packages/ui/src/toggle-tip/toggle-tip.tsx

Catalog

Category
overlays
Priority
Extra
Primitive
react-aria
React Aria
DialogTrigger + Popover
Base UI
Popover