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.
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" }' |