Carregando…

Tooltip

Overlays

Hover/click/focus floating content: tooltip, rich tooltip, popover and hover/context card.

UnificadosRich Tooltip Popover Hover Card Context Card

Context Card

Unificado

Instalação via CLI

$ npx kikitocn add tooltip

Interno:

@/lib/utils

Exemplo de uso

TooltipExample.tsx

import { Tooltip } from "@/components/ui/cn/tooltip/Tooltip";
import { Button } from "@/components/ui/cn/button/Button";

export function TooltipExample() {
  return (
    <Tooltip content="Informação adicional">
      <Button variant="outline">Passe o mouse</Button>
    </Tooltip>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`variant`	`'simple' \| 'rich' \| 'card'`	`'simple'`	Variante visual: simple (tooltip/popover padrão), rich (título/ícone/ação) ou card (preview hover/context)
`trigger`	`'hover' \| 'focus' \| 'click'`	`'hover'`	Modo de disparo (variant 'simple'): hover/focus exibem o tooltip; click renderiza um popover
`title`	`ReactNode`	`undefined`	variant 'rich' ou popover (trigger 'click'): título do conteúdo
`icon`	`ReactNode`	`undefined`	variant 'rich': ícone exibido ao lado do título
`action`	`{ label: string; onClick: () => void }`	`undefined`	variant 'rich': botão de ação no rodapé
`maxWidth`	`number`	`240`	variant 'rich': largura máxima do balão (px)
`description`	`string`	`undefined`	popover (trigger 'click'): texto descritivo abaixo do título
`footer`	`ReactNode`	`undefined`	popover (trigger 'click'): conteúdo do rodapé
`showClose`	`boolean`	`true`	popover (trigger 'click'): exibe o botão de fechar
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	variant 'card': lado do card relativo ao trigger
`openDelay`	`number`	`300`	variant 'card': delay em ms antes de abrir no hover
`closeDelay`	`number`	`150`	variant 'card': delay em ms antes de fechar ao sair
`content*`	`ReactNode`	—	Conteúdo exibido no tooltip
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'right'`	`'top'`	Posicionamento relativo ao trigger
`delay`	`number`	`300`	Delay em ms antes de exibir
`disabled`	`boolean`	`false`	Desabilita o tooltip
`children*`	`ReactElement`	—	Elemento que dispara o tooltip (must forward ref)

Voltar para Overlays

Carregando…

import { Tooltip } from "@/components/ui/cn/tooltip/Tooltip"; import { Button } from "@/components/ui/cn/button/Button"; export function TooltipExample() { return ( <Tooltip content="Informação adicional"> <Button variant="outline">Passe o mouse</Button> </Tooltip> ); }

Prop

Tipo

Padrão

Descrição

variant

'simple' | 'rich' | 'card'

'simple'

Variante visual: simple (tooltip/popover padrão), rich (título/ícone/ação) ou card (preview hover/context)

trigger

'hover' | 'focus' | 'click'

'hover'

Modo de disparo (variant 'simple'): hover/focus exibem o tooltip; click renderiza um popover

title

ReactNode

undefined

variant 'rich' ou popover (trigger 'click'): título do conteúdo

icon

ReactNode

undefined

variant 'rich': ícone exibido ao lado do título

action

{ label: string; onClick: () => void }

undefined

variant 'rich': botão de ação no rodapé

maxWidth

number

240

variant 'rich': largura máxima do balão (px)

description

string

undefined

popover (trigger 'click'): texto descritivo abaixo do título

footer

ReactNode

undefined

popover (trigger 'click'): conteúdo do rodapé

showClose

boolean

true

popover (trigger 'click'): exibe o botão de fechar

side

'top' | 'bottom' | 'left' | 'right'

'bottom'

variant 'card': lado do card relativo ao trigger

openDelay

number

300

variant 'card': delay em ms antes de abrir no hover

closeDelay

number

150

variant 'card': delay em ms antes de fechar ao sair

content*

ReactNode

—

Conteúdo exibido no tooltip

placement

'top'

Posicionamento relativo ao trigger

delay

number

300

Delay em ms antes de exibir

disabled

boolean

false

Desabilita o tooltip

children*

ReactElement

—

Elemento que dispara o tooltip (must forward ref)

Tooltip

Rich Tooltip

Popover

Hover Card

Context Card

Tooltip

Placements

Content

Rich Tooltip

Popover

Default

Placements

Hover Card

Context Card

Placements

Content

Default

Placements