NewTooltip
Tooltip customizado com posicionamento via portal (document.body). Usa getBoundingClientRect() para coordenadas fixas — não sofre clipping por overflow:hidden do pai. Suporta 4 posições (top/bottom/left/right), seta triangular CSS, e transição de opacidade. Usado exclusivamente no chat de atendimento. Diferente do VxTooltip (Vuesax) — este é um componente custom com pill escuro (#374151).
4 Posições
Todas as 4 posições disponíveis. position="top" é o padrão e dominante (>80% dos usos). position="bottom" nunca foi encontrado no admin real.
★ padrão
nunca usado
sidebar nav
<!-- position="top" (padrão e mais usado) -->
<NewTooltip text="Recarregar" position="top">
<vs-button
type="filled"
icon="refresh"
class="ml-2"
:disabled="lockRefresh"
@click="refreshAttendances"
/>
</NewTooltip>
<!-- position="right" — sidebar de plataforma -->
<NewTooltip v-if="hasMaria" text="Kanban Pedidos" position="right" class="d-inline-block">
<button type="button" class="chat-platform-navbar__icon" @click="selectPlatform('kanban')">
<vs-icon iconPack="material-icons" icon="view_column" />
</button>
</NewTooltip>
<!-- position="left" -->
<NewTooltip text="Selecionar Atendimento" position="left">
<vs-button type="filled" icon="check_circle" icon-pack="material-icons" @click="toggleSelectList" />
</NewTooltip>
<!-- Exemplo sintético — position="bottom" sem uso real encontrado -->
<NewTooltip text="Mais informações" position="bottom">
<feather-icon icon="InfoIcon" svgClasses="w-5 h-5 stroke-current" />
</NewTooltip>Comportamento Portal
O tooltip é teleportado para .custom-tooltip-portal no document.body — evita clipping por overflow:hidden do componente pai. Coordenadas calculadas via getBoundingClientRect() do trigger, com posição fixed e gap de 8px.
<button>Trigger</button>
</NewTooltip>
<div class="custom-tooltip custom-tooltip--visible">...</div>
</div>
beforeDestroy remove o tooltip do portal se ainda estiver lá.
API
<!-- text: obrigatório. position: 'top'|'bottom'|'left'|'right' -->
<NewTooltip text="Descrição da ação" position="top">
<!-- Trigger: qualquer elemento — hover/focus mostra o tooltip -->
<feather-icon icon="HelpCircleIcon" svgClasses="w-4 h-4" />
</NewTooltip>Props
| Nome | Tipo | Default | Obrig. | Descrição |
|---|---|---|---|---|
text |
String | — | Sim | Texto do tooltip. Max-width 280px, quebra linha automaticamente. |
position |
String | "top" | Não | Posição em relação ao trigger. Valores: 'top', 'bottom', 'left', 'right'. Validado com validator. |
Slots
| Slot | Descrição |
|---|---|
default |
Elemento trigger — qualquer conteúdo. hover/focusin mostra o tooltip; mouseleave/focusout esconde. |
CSS — Valores internos
| Propriedade | Valor |
|---|---|
| Background | #374151 (cinza escuro — não usa var(--dark)) |
| Color | #fff |
| Padding | 10px 14px |
| Border-radius | 8px |
| Font-size | 13px / font-weight 500 |
| Max-width | 280px |
| Box-shadow | 0 4px 12px rgba(0,0,0,0.15) |
| Transition | opacity 0.15s ease |
| Arrow size | 5px (border trick) |
| Gap trigger | 8px |
| z-index | 999999 (portal: 999998) |
| Position | fixed (coordenadas via getBoundingClientRect) |