Headless Kit v0.2.2
WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Tooltip

A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Hover over me!

Building blocks

Examples

Describing Icon with Tooltip

Accessibility

Keyboard interaction

Key

Description

Esc
Dismisses the Tooltip when focused.

API

Tooltip

PropTypeDescription
class
string

CSS classes to apply to the Tooltip.

content
string

The content displayed in the Tooltip.

durationMs
number

Sets a delay duration in milliseconds before the Tooltip is displayed.

inline
boolean

Determines if the Tooltip is rendered inline.

position
enum

Determines the position the Tooltip is rendered.