Tooltip

Apresentação

O componente Tooltip é responsável por exibir dicas e informações adicionais quando o usuário interage com um elemento. Ele é ideal para fornecer contexto adicional, explicações ou informações complementares sem ocupar espaço permanente na interface.

Quando usar

• Para explicar funcionalidades
• Para mostrar informações adicionais
• Para fornecer dicas de uso
• Para exibir definições de termos
• Para mostrar atalhos de teclado
• Para explicar ícones ou símbolos
• Para fornecer contexto adicional
• Para mostrar informações de ajuda

Forma básica de uso

import { Tooltip } from 'eitri-luminus';

// Tooltip básico
<Tooltip tip="Esta é uma dica">
  <button className="btn">Hover me</button>
</Tooltip>

// Tooltip com classes personalizadas
<Tooltip 
  tip="Informação importante" 
  className="tooltip-primary"
>
  <button className="btn">Informação</button>
</Tooltip>

// Tooltip com posicionamento
<Tooltip 
  tip="Dica à direita" 
  className="tooltip-right"
>
  <button className="btn">Direita</button>
</Tooltip>

<Tooltip 
  tip="Dica à esquerda" 
  className="tooltip-left"
>
  <button className="btn">Esquerda</button>
</Tooltip>

<Tooltip 
  tip="Dica acima" 
  className="tooltip-top"
>
  <button className="btn">Topo</button>
</Tooltip>

<Tooltip 
  tip="Dica abaixo" 
  className="tooltip-bottom"
>
  <button className="btn">Base</button>
</Tooltip>

// Tooltip com conteúdo rico
<Tooltip tip={
  <div className="flex items-center gap-2">
    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Dica com ícone</span>
  </div>
}>
  <button className="btn">Dica Rica</button>
</Tooltip>

Propriedades

Propriedade	Tipo	Descrição
tip	string	Texto ou conteúdo da dica
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Tooltip herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'tooltip' para estilização base
• O conteúdo da dica é definido através do atributo data-tip
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Suporta diferentes posicionamentos (top, bottom, left, right)
• Suporta diferentes variantes de estilo
• É ideal para informações contextuais
• Mantém a semântica HTML apropriada
• Pode conter conteúdo rico (HTML, ícones, etc)
• É especialmente útil para melhorar a usabilidade
• Pode ser combinado com outros componentes
• Suporta diferentes tamanhos e estilos
• É ativado por hover por padrão