Rich Tooltip

Overlays

Tooltip with title, icon, action button and 4 placements for richer content.

Instalação via CLI

$ npx kikitocn add rich-tooltip

Interno:

@/lib/utils

Exemplo de uso

Rich TooltipExample.tsx

import { RichTooltip } from "@/components/ui/cn/rich-tooltip/RichTooltip";

export function RichTooltipExample() {
  return (
    <RichTooltip />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`content*`	`ReactNode`	—	Conteúdo principal do tooltip
`children*`	`ReactElement`	—	Elemento que dispara o tooltip
`title`	`ReactNode`	`undefined`	Título em negrito no topo do tooltip
`icon`	`ReactNode`	`undefined`	Ícone ao lado do título
`action`	`{ label: string; onClick: () => void }`	`undefined`	Link de ação no rodapé do tooltip
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Posicionamento do tooltip
`maxWidth`	`number`	`260`	Largura máxima do tooltip em px

Voltar para Overlays

Carregando…