Menu
Components
Tooltip
Live compiled demo for the Tooltip component contract.
Use the code printed on the packing slip.
| data-state | open, closed, disabled |
|---|---|
| keyboard | Escape closes an open tooltip |
| change reasons | trigger-pointer-enter, trigger-pointer-leave, trigger-focus, trigger-blur, escape-key, programmatic |
Usage
A small label that appears on hover or focus to describe its trigger.
- Import the versioned component from
@kovojs/ui/tooltip. - Copy the source into your app with
kovo add tooltipwhen product code should own the implementation.
Source
- Package source:
packages/ui/src/tooltip.tsx - Gallery fixture:
examples/gallery/src/demo-fixtures.tsx - Interactive demo:
examples/gallery/src/interactive/tooltip-demo.tsx
Behavior contract
The rendered fixture above includes the component contract table. Interactive pages compile the authored TSX demo and then lift the same contract table from the static fixture, so the visible behavior and documented ARIA/data-state surface stay together.