Tooltip | Medway UI

Popup que mostra informações sobre um elemento quando ele recebe foco pelo teclado ou quando o mouse passa sobre ele.

Configuração

Adicione o componente TooltipProvider ao layout raiz ou a um componente central da sua aplicação.

layout.tsx

import { TooltipProvider } from "@medway-ui/core";
 
export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        <TooltipProvider>
          {children}
        </TooltipProvider>
      </body>
    </html>
  );
}

Exemplos

Básico

Posição

API

Propriedade	Tipo	Padrão	Descrição
defaultOpen	boolean	false	Estado de abertura do tooltip na primeira renderização. Use quando não precisar controlar o estado de abertura.
open	boolean	-	Estado de abertura controlado do tooltip. Deve ser usado junto com onOpenChange.
onOpenChange	(open: boolean) => void	-	Função chamada quando o estado de abertura do tooltip muda.
delayDuration	number	Herdado (0)	Tempo entre o mouse entrar no trigger e o tooltip abrir. Se omitido, herda o valor do `TooltipProvider` em volta, que por padrão é 0.
disableHoverableContent	boolean	false	Quando true, tentar passar o mouse sobre o conteúdo fecha o tooltip assim que o ponteiro sai do trigger.

TooltipTrigger

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, mesclando props e comportamento.

TooltipContent

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Troca o elemento renderizado por padrão pelo que for passado como filho, mesclando props e comportamento.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Lado preferido do trigger em que o tooltip é renderizado quando aberto.
sideOffset	number	0	Distância em pixels até o trigger.
align	"start" \| "center" \| "end"	"center"	Alinhamento preferido em relação ao trigger. Pode mudar quando há colisões.
alignOffset	number	0	Deslocamento em pixels a partir dos alinhamentos "start" ou "end".
avoidCollisions	boolean	true	Quando true, ignora as preferências de side e align para evitar colisões com as bordas do limite.