Tooltip
El componente Tooltip nos permite mostrar información adicional de una forma no 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;Se compone de una caja flotante con texto.
Usamos este componente cuando necesitamos dar más información a la persona usuaria en un espacio limitad. Esta información debe ser opcional y sólo servir para agregar más contexto, no siendo esencial para la experiencia.
El componente se muestra por medio de un click, tap o mouse-over sobre un icono u otro elemento.
El icono elegido para accionar el Tooltip debe representar correctamente la información a ser exhibida.
- Explicar términos en formularios
- Mostrar explicaciones sobre nuevas features
- Mostrar tips sobre botones sin texto
- Alert - Puede ser usado para exhibir información obligatoria de forma intrusiva sin la necesidad de una interacción de la persona usuaria.
Instalá el 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.