components
Tooltip
v.1.0.0 | SaturnImport
import { Tooltip } from '@kubit-ui-web/react-components'
1
<Tooltip variant="DEFAULT" content={{ content: 'Content' }} />
Props
Let's delve into the versatility of the tooltip component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant to add styles |
children Required | JSX.Element or String or ReactNode | - | Children |
| onOpenClose | (open: boolean) => void | - | Informs when the tooltip is closed or opened |
| align | TooltipAlignType | - | Position of the toltip |
| disabled | Boolean | - | When true, the tooltip will not be shown and no action will be executed |
| title | TooltipTitleType | - | Title of the tooltip |
| content | TooltipContentType | - | Aria label text for progress bar |
| closeIcon | IIcon | - | Add icon |
| childrenAsButton | Boolean | true | Tooltip trigger wrapper will be a button. Use when children is not focusable |
| animation | CssAnimationType | - | Variant to add styles |
| animationOptions | ICssAnimationOptions | - | CssAnimation options (duration, delay, iterationCount, timingFunction, ...) |
| animationExecution | CssAnimationExecuteOption | - | CssAnimation execute option |
| tooltipAsModal | Boolean | - | Tooltip behaviour will be as a modal |
| popover | TooltipPopoverType | - | Object to modify popover value |
| dragIcon | IElementOrIcon | - | Drag icon |
| dataTestId | String | - | Test id of the tooltip. Internal components will concatenate from this test id |
| ctv | TooltipVariantStylesProps | - | Modify styles for the default version of the component |