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.