Tooltip

Muestra información adicional al pasar el cursor.

Importación

import { Tooltip } from 'asterui'

Ejemplos

Tooltip Básico

Tooltip simple que aparece al pasar el cursor.

</>

Hover meThis is a tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="This is a tooltip">
        <Button>Hover me</Button>
      </Tooltip>
    )
}

export default App

Posiciones

Los tooltips pueden aparecer en diferentes posiciones.

</>

TopTop tooltip

BottomBottom tooltip

LeftLeft tooltip

RightRight tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <div className="flex flex-wrap gap-4 justify-center py-8">
        <Tooltip tip="Top tooltip" position="top">
          <Button>Top</Button>
        </Tooltip>
        <Tooltip tip="Bottom tooltip" position="bottom">
          <Button>Bottom</Button>
        </Tooltip>
        <Tooltip tip="Left tooltip" position="left">
          <Button>Left</Button>
        </Tooltip>
        <Tooltip tip="Right tooltip" position="right">
          <Button>Right</Button>
        </Tooltip>
      </div>
    )
}

export default App

Colores

Variantes de color para diferentes contextos.

</>

PrimaryPrimary tooltip

SecondarySecondary tooltip

AccentAccent tooltip

InfoInfo tooltip

SuccessSuccess tooltip

WarningWarning tooltip

ErrorError tooltip

import { Tooltip, Button, Space } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Tooltip tip="Primary tooltip" color="primary">
          <Button color="primary">Primary</Button>
        </Tooltip>
        <Tooltip tip="Secondary tooltip" color="secondary">
          <Button color="secondary">Secondary</Button>
        </Tooltip>
        <Tooltip tip="Accent tooltip" color="accent">
          <Button color="accent">Accent</Button>
        </Tooltip>
        <Tooltip tip="Info tooltip" color="info">
          <Button color="info">Info</Button>
        </Tooltip>
        <Tooltip tip="Success tooltip" color="success">
          <Button color="success">Success</Button>
        </Tooltip>
        <Tooltip tip="Warning tooltip" color="warning">
          <Button color="warning">Warning</Button>
        </Tooltip>
        <Tooltip tip="Error tooltip" color="error">
          <Button color="error">Error</Button>
        </Tooltip>
      </Space>
    )
}

export default App

Siempre Abierto

Fuerza al tooltip a permanecer visible.

</>

Always OpenAlways visible

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="Always visible" open>
        <Button>Always Open</Button>
      </Tooltip>
    )
}

export default App

API

Tooltip

Propiedad	Descripción	Tipo	Predeterminado
tip	Contenido de texto del tooltip	string	-
position	Posición del tooltip	'top' | 'bottom' | 'left' | 'right'	'top'
color	Color del tooltip	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
open	Forzar al tooltip a ser visible	boolean	false
children	Elemento que activa el tooltip	React.ReactNode	-
className	Clases CSS adicionales	string	-

Accesibilidad

• El contenido del tooltip se expone mediante aria-describedby
• Los tooltips aparecen en focus además de al pasar el cursor
• Contraste de color suficiente en todas las variantes de color
• Las teclas de flecha se pueden usar cuando el tooltip contiene elementos enfocables