Tooltip

Exibe informações adicionais ao passar o cursor.

Importação

import { Tooltip } from 'asterui'

Exemplos

Tooltip Básico

Tooltip simples que aparece ao passar o 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

Posições

Tooltips podem aparecer em diferentes posições.

</>

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

Cores

Variantes de cor 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

Sempre Aberto

Force o tooltip a permanecer visível.

</>

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

Propriedade	Descrição	Tipo	Padrão
tip	Conteúdo de texto do tooltip	string	-
position	Posição do tooltip	'top' | 'bottom' | 'left' | 'right'	'top'
color	Cor do tooltip	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
open	Forçar tooltip a ser visível	boolean	false
children	Elemento que ativa o tooltip	React.ReactNode	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Conteúdo do tooltip é exposto via aria-describedby
• Tooltips aparecem no foco assim como ao passar o cursor
• Contraste de cor suficiente em todas as variantes de cor
• Teclas de seta podem ser usadas quando tooltip contém elementos focáveis