Tooltip
O componente Tooltip nos permite mostrar uma informação adicional de forma não intrusiva.
import React from "react";
import { Box, Tooltip, Text } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Box display="flex" justifyContent="center">
<Tooltip content="Lorem ipsum dolor site amet">
<Text>Hover</Text>
</Tooltip>
</Box>
);
export default Example;O componente é composto por uma caixa flutuante com texto.
Utilizamos esse componente quando precisamos dar ao usuário mais informação em um espaço limitado, esta informação deve ser opcional e só agregar contexto, não devendo ser essencial para experiência.
O componente é exibido por meio deum clique, tap ou mouse over sobre um ícone ou outro elemento.
O ícone escolhido para acionar o Tooltip deve representar corretamente a informação a ser apresentada.
- Explicar termos em formulários
- Exbir explicações sobre novas features
- Exibir dicas sobre botões sem texto
- Alert - Pode ser usado para exibir informação obrigatória de forma intrusiva sem a necessidade de alguma interação do usuário.
Instale o componente via terminal.
npm install @nimbus-ds/tooltipAdditional props are passed to the <Tooltip> element. See div docs for a list of props accepted by the <Tooltip> element.
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | An HTML element, or a function that returns one. It's used to set the position of the tooltip. | |
content* | string | The text that should appear in the tooltip message. | |
arrow | boolean | Conditional for displaying the popover arrow. | |
position | 'bottom' | 'bottom' | Position of the popover. |
maxWidth | string | The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |