@gravity-ui/uikit
Version:
Gravity UI base styling and components
74 lines (56 loc) • 5.5 kB
Markdown
# Tooltip
A simple text tip that uses its child node as an anchor. This component accepts only text content and may be an excellent
alternative to the browser's `title` attribute with its small size and long appearance delay.
## Usage
```tsx
import {Tooltip} from '@gravity-ui/uikit';
<Tooltip content="Content">
<div tabIndex={0}>Anchor</div>
</Tooltip>;
```
## Anchor
In order for `Tooltip` to work you should pass a valid `ReactElement` as a children which accepts `ref` property for `HTMLElement`
and other properties for `HTMLElement`.
Alternatively, you can pass function as a children to provide ref and props manually to your underlying components:
```tsx
import {Tooltip} from '@gravity-ui/uikit';
<Tooltip content="Content">
{(props, ref) => <MyCustomButton buttonProps={props} buttonRef={ref} />}
</Tooltip>;
```
## Controlled State
By default `Tooltip` opens and hides by hovering the anchor. You can change this behaviour to manually set the open state.
Pass your state to the `open` prop and change it from `onOpenChange` callback.
`onOpenChange` callback has the following signature: `(open: boolean, event?: Event, reason: 'hover' | 'focus') => void`.
## Role
`Tooltip` accepts the `role` property which changes how it should act it terms of accessibility.
`tooltip` role should be used when anchor has its own text and `label` role otherwise (e.g. in icon button).
## Properties
| Name | Description | Type | Default |
| :------------ | ----------------------------------------------------------------------------------------------- | :----------------------------------------------: | :-------------: |
| children | Anchor element for the `Tooltip` | `React.ReactElement` `Function` | |
| className | `class` HTML attribute | `string` | |
| closeDelay | Number of ms to delay hiding the `Tooltip` after the hover ends | `number` | `0` |
| container | DOM element to which component is mounted via `Portal` | `HTMLElement` | `document.body` |
| content | Content that will be shown in the `Tooltip` | `React.ReactNode` | |
| disablePortal | Disables using `Portal` | `boolean` | `false` |
| disabled | Prevent the `Tooltip` from opening | `boolean` | |
| offset | `Tooltip` offset from its anchor | `number` | `4` |
| onOpenChange | Callback to handle open state change | `Function` | |
| open | Controlled open state | `boolean` | |
| openDelay | Number of ms to delay showing the `Tooltip` after the hover begins | `number` | `1000` |
| placement | `Tooltip` position relative to its anchor | [`PopupPlacement`](./Popup.md#placement) | `bottom` |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
| rest | How much time in ms the cursor must be rest before open. | `number` | `0` |
| role | The role `Tooltip` is used for | `"tooltip"` `"label"` | `"tooltip"` |
| strategy | The type of CSS position property to use. | `absolute` `fixed` | `absolute` |
| style | `style` HTML attribute | `React.CSSProperties` | |
| trigger | Event type that should trigger opening. Default `all` value refers to both `hover` and `focus`. | `"all"` `"focus"` | `"all"` |
## CSS API
| Name | Description |
| :----------------------------- | :--------------- |
| `--g-tooltip-text-color` | Text color |
| `--g-tooltip-background-color` | Background color |
| `--g-tooltip-padding` | Padding |
| `--g-tooltip-border-radius` | Border radius |
| `--g-tooltip-box-shadow` | Shadow |