Componente Tooltip React

Componente en react de Tooltip del kit USS


1import { Tooltip } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

El componente <Tooltip/> funciona como un wrapper del elemento al que se quiere agregar el tooltip, se muestra al hacer hover o focus sobre el componente.

Caveats y consideraciones

No se puede clocar el <Tooltip> dentro de una etiqueta <p> dado que esta no acepta elementos <div> dentro, por lo que se recomienda colocar dentro de una etiqueta <span> cuando se quiera agregar un tootlip en un texto.

No se recomienda colocar botones ni enlaces ya que no se puede acceder a ellos via navegacion por teclado, dificultando la accesibilidad del contenido.

Props

Prop	Tipo	default	Descripción
offset	number	24	Define el offset del tooltip en px
placement	string	bottom	Define la posicion del tooltip, puede ser: 'top', 'bottom', 'left', 'right'
children	JSX	-	Elemento trigger del tooltip

Ejemplo de uso

1Cargando...

Contenido