Skip to content

Tooltip

Shows contextual help text near the target element. In a terminal UI, the tooltip renders inline below the target since there is no floating layer. Visibility is controlled via the show prop.

Import

tsx
import { Tooltip } from "silvery"

Props

PropTypeDefaultDescription
contentstringrequiredTooltip text content
showbooleanfalseWhether the tooltip is visible
childrenReactNoderequiredTarget element

Usage

tsx
<Tooltip content="Delete permanently" show={isFocused}>
  <Button label="Delete" onPress={handleDelete} />
</Tooltip>

// Always visible
<Tooltip content="This action cannot be undone" show>
  <Text>Dangerous action</Text>
</Tooltip>

Rendering

Tooltip text is rendered below the target in $muted with dimColor for subtlety.

See Also

  • Badge -- inline status label

Released under the MIT License.