MeTooltip

Tooltip informativo com suporte a posicionamento e trigger personalizado via slot.

Playground

Importação

vue

<script>
import { MeTooltip } from '@/components/global/utils/export/index'
</script>

Uso Básico

Exibe o ícone help_outline como trigger. O tooltip aparece ao passar o mouse ou focar com teclado.

vue

<MeTooltip text="Este campo é obrigatório." />
<MeTooltip text="Máximo de 200 caracteres." />

Com HTML no Conteúdo

A prop text aceita HTML — útil para links e formatação.

vue

<MeTooltip text="Veja a <strong>documentação completa</strong> para mais detalhes." />

Atenção

O conteúdo é renderizado via v-html. Sanitize o texto se a origem for input do usuário.

Posicionamento

Por padrão o tooltip aparece centralizado abaixo do trigger. Use as props de alinhamento para ajustar.

Centro (padrão)

vue

<MeTooltip text="Tooltip centralizado (padrão)" />

Alinhado à Esquerda

vue

<MeTooltip text="Tooltip alinhado à esquerda do trigger." :alignStart="true" />

Alinhado à Direita

vue

<MeTooltip text="Tooltip alinhado à direita do trigger." :alignEnd="true" />

Acima do Elemento

vue

<MeTooltip text="Tooltip acima do trigger." :alignTop="true" />

Trigger Customizado

Use custom=true e o slot default para substituir o ícone padrão por qualquer elemento.

vue

<!-- Texto como trigger -->
<MeTooltip text="Mais informações sobre este item." :custom="true">
  <span style="text-decoration: underline; cursor: pointer;">
    Mais informações
  </span>
</MeTooltip>

<!-- Badge como trigger -->
<MeTooltip text="Este status indica que o processo está em andamento." :custom="true">
  <span class="badge-em-andamento">Em andamento</span>
</MeTooltip>

Casos de Uso

Em Labels de Formulário

Nome completo

vue

<div style="display: flex; align-items: center; gap: 4px;">
  <label>Nome completo</label>
  <MeTooltip text="Informe o nome como consta no documento oficial." />
</div>

Em Tabelas com Colunas Restritas

vue

<!-- Em cabeçalho de tabela, alinhado à direita para não sair da tela -->
<MeTooltip
  text="Porcentagem de conclusão das atividades no período selecionado."
  :alignEnd="true"
/>

API

Props

Prop	Tipo	Padrão	Descrição
`text`	`string`	-	Texto HTML exibido dentro do tooltip.
`alignEnd`	`boolean`	`false`	Alinha o tooltip à direita do elemento pai.
`alignStart`	`boolean`	`false`	Alinha o tooltip à esquerda do elemento pai.
`alignTop`	`boolean`	`false`	Exibe o tooltip acima do elemento.
`custom`	`boolean`	`false`	Usa slot personalizado no lugar do ícone padrão.

Slots

Nome	Descrição
`default`	Trigger personalizado. Substituí o ícone `help_outline`. Só renderizado quando `custom=true`.

Acessibilidade

O elemento raiz possui tabindex="0" — o tooltip pode ser ativado via foco por teclado
O tooltip aparece ao receber foco (focusin) e fecha ao perder foco (focusout)
O ícone padrão help_outline é familiar para indicar ajuda contextual

Dica

Combine MeTooltip com custom=true em ícones de status ou badges para fornecer contexto adicional sem poluir o layout.

Restrições

alignEnd, alignStart e alignTop são mutuamente exclusivos — use apenas um por vez
O slot default só é renderizado quando custom=true

MeTooltip ​

Playground ​

Importação ​

Uso Básico ​

Com HTML no Conteúdo ​

Posicionamento ​

Centro (padrão) ​

Alinhado à Esquerda ​

Alinhado à Direita ​

Acima do Elemento ​

Trigger Customizado ​

Casos de Uso ​

Em Labels de Formulário ​

Em Tabelas com Colunas Restritas ​

API ​

Props ​

Slots ​

Acessibilidade ​