Docs›Componentes (Admin)›mad-tooltip
Componentes (Admin)

mad-tooltip

Tooltip hover/focus.

Tooltip simples ativado por hover/focus. Envolve qualquer conteudo (botao, icone, texto) e mostra um balao com texto curto.

Props

Prop Tipo Default Descricao
content string '' Texto exibido no balao
position string 'top' Posicao do balao: top, bottom, left, right
class string '' Classes CSS extras no wrapper

O conteudo do slot e o elemento "gatilho" (trigger). O tooltip aparece no hover/focus desse elemento.

content e renderizado escapado ({{ $content }}) — HTML passado ali sai como texto literal, nao como marcacao. Para balao com conteudo formatado use <mad-popover>.

Uso basico

<mad-tooltip content="Salvar alteracoes">
    <mad-btn variant="primary" icon="save" mad:click="onSave" />
</mad-tooltip>

Posicoes

<mad-tooltip content="Em cima" position="top">
    <mad-btn icon="arrow-up" />
</mad-tooltip>

<mad-tooltip content="Embaixo" position="bottom">
    <mad-btn icon="arrow-down" />
</mad-tooltip>

<mad-tooltip content="Esquerda" position="left">
    <mad-btn icon="arrow-left" />
</mad-tooltip>

<mad-tooltip content="Direita" position="right">
    <mad-btn icon="arrow-right" />
</mad-tooltip>

Em icones e textos

{{-- Icone com tooltip explicativo --}}
<mad-tooltip content="Campo obrigatorio">
    <i data-lucide="info"></i>
</mad-tooltip>

{{-- Texto truncado --}}
<mad-tooltip content="Pedido criado em 01/04/2026 por Maria Silva">
    <span>Ver detalhes</span>
</mad-tooltip>

Em botoes de acao (toolbar)

<div style="display:flex;gap:8px;">
    <mad-tooltip content="Editar">
        <mad-btn variant="ghost" icon="pencil" mad:click="onEdit" />
    </mad-tooltip>
    <mad-tooltip content="Duplicar">
        <mad-btn variant="ghost" icon="copy" mad:click="onDuplicate" />
    </mad-tooltip>
    <mad-tooltip content="Excluir" position="bottom">
        <mad-btn variant="ghost" icon="trash-2" mad:click="onDelete" />
    </mad-tooltip>
</div>

Trigger

O tooltip e ativado por:

  • mouseenter / mouseleave (hover do mouse)
  • focusin / focusout (foco via teclado / acessibilidade)

Nao ha trigger por clique — para popovers acionados por clique, use <mad-popover>.

NUNCA fazer

{{-- ERRADO: usar atributo title nativo (visual feio, sem controle) --}}
<button title="Salvar">Save</button>

{{-- CERTO --}}
<mad-tooltip content="Salvar">
    <mad-btn icon="save">Save</mad-btn>
</mad-tooltip>

{{-- ERRADO: montar tooltip manualmente com CSS/JS --}}
<div class="my-tooltip-wrapper" onmouseenter="showTip()">
    <span class="tip">Texto</span>
    <button>Acao</button>
</div>

{{-- CERTO --}}
<mad-tooltip content="Texto">
    <mad-btn>Acao</mad-btn>
</mad-tooltip>

{{-- ERRADO: tooltip com HTML rico (use popover para conteudo complexo) --}}
<mad-tooltip content="<b>Negrito</b> e <i>italico</i>">
    <mad-btn>X</mad-btn>
</mad-tooltip>

{{-- CERTO: tooltip e somente texto curto. Para HTML, usar popover --}}
<mad-tooltip content="Texto simples explicativo">
    <mad-btn>X</mad-btn>
</mad-tooltip>