Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tooltip

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Simple text that displays extra contextual information next to the trigger element.

import { Tooltip } from '@kubit-ui-web/react-components'
123456789
<Tooltip
  variant="DEFAULT"
  title={{ content: 'Title' }}
  content={{ content: 'Short description' }}
  align={TooltipAlignType.TOP}
  closeIcon={{ icon: 'ICON_X_CIRCLE' }}
>
  Hover me
</Tooltip>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use. Access them through the variant prop:

123
<Tooltip variant="DEFAULT" title={{ content: 'Title' }} content={{ content: 'Content' }} align="top">
  Hover me
</Tooltip>

Align

This prop serves to position the tooltip in relation to the trigger component.

12345678910
<Tooltip variant="DEFAULT" content={{ content: 'Short description' }} align="top">
  Hover me (Top)
</Tooltip>
<Tooltip variant="DEFAULT" content={{ content: 'Short description' }} align="right">
  Hover me (Right)
</Tooltip>
<Tooltip variant="DEFAULT" content={{ content: 'Short description' }} align="bottom">
  Hover me (Bottom)
</Tooltip>
<Tooltip variant="DEFAULT" content={{ content: 'Short description' }} align="left">
SnackbarAccessibility
TooltipDesign Specs