VxTooltip

src/layouts/components/vx-tooltip/VxTooltip.vue — registrado globalmente em globalComponents.js

Overlay Medium 34 usos

Tooltip do design system Vuexy customizado pelo Pedbot. Inserido no document.body via utils.insertBody() — evita clipping por overflow:hidden. Suporta título (<h4>), cor customizável, delay de exibição, e 4 posições com fallback automático: left/right caem para bottom silenciosamente quando ultrapassam o viewport (after-none remove a seta). Diferente do NewTooltip: VxTooltip aceita título, cor variável e é registrado globalmente; NewTooltip é pill escuro fixo (#374151) usado só no chat.

4 Posições

top é o padrão (default). left/right fazem fallback automático para bottom sem seta (after-none) quando não cabem no viewport. position="left" não foi encontrado em uso real no admin.

position="top"
★ padrão — 80%+ usos

position="bottom"
navbar bookmarks

position="right"

position="left"
sintético

left/right fallback
after-none

<!-- Padrão dominante: HelpCircleIcon ao lado de label, position omitida (default top) -->
<vx-tooltip text="Selecione esta opção caso você queira criar uma categoria via planilha.">
  <feather-icon class="ml-2" icon="HelpCircleIcon" />
</vx-tooltip>

<!-- Position explícita top -->
<vx-tooltip
  class="pt-1"
  text="Limite diário de atendimentos que o bot pode processar."
  position="top"
>
  <feather-icon
    icon="HelpCircleIcon"
    class="ml-2"
    svgClasses="w-6 h-6 hover:text-primary stroke-current"
  />
</vx-tooltip>

<!-- Position right -->
<vx-tooltip
  class="mt-2"
  position="right"
  color="gray"
  text="Habilitando esta função, seu bot poderá classificar atendimentos em Alta, Média e Baixa prioridade."
  delay=".2s"
>
  <feather-icon icon="HelpCircleIcon" svgClasses="w-6 h-6 text-grey" />
</vx-tooltip>

Com Título

A prop title exibe um <h4> acima do texto principal. Nenhum uso real com title foi encontrado no admin — todos os 34 usos usam apenas text.

title + text
sintético — prop nunca usada no admin

<!-- Exemplo sintético — prop title sem uso real encontrado no admin -->
<vx-tooltip title="Atenção" text="Esta ação não pode ser desfeita após confirmar.">
  <feather-icon icon="AlertCircleIcon" svgClasses="w-5 h-5 text-warning stroke-current" />
</vx-tooltip>

Com Cor (color)

A prop color aceita tokens (primary, success, danger, warning) ou hex. No admin real, apenas color="gray" foi encontrado (em DynamicSettings.vue). A cor é aplicada via _color.getColor() como background inline.

primary

success

danger

warning

gray
★ único uso real

<!-- color="gray" é o único valor de color encontrado nos 34 usos reais -->
<vx-tooltip
  delay=".2s"
  class="mt-2"
  color="gray"
  position="bottom"
  text="Essa funcionalidade permite unificar todas as conexões disponíveis na plataforma."
>
  <feather-icon icon="HelpCircleIcon" svgClasses="w-10 h-9 text-grey" />
</vx-tooltip>

Com Delay + Bookmarks

Prop delay=".3s" adiciona transition-delay CSS — tooltip aparece após 300ms de hover. Usado nos ícones de bookmark da navbar, onde o usuário pode passar o mouse rapidamente sem querer ver tooltips.

<vx-tooltip :text="page.title" position="bottom" delay=".3s">
  <feather-icon
    :svgClasses="['h-6 w-6 stroke-current', textColor]"
    class="p-2 cursor-pointer"
    :icon="page.icon"
    @click="$router.push(page.url).catch(() => {})"
  />
</vx-tooltip>

Comportamento de Portal

VxTooltip insere o elemento tooltip no document.body via utils.insertBody(). Isso evita clipping causado por overflow:hidden ou z-index de ancestrais.

mouseenter no slot (trigger)

↓

utils.insertBody(tooltipEl, document.body) — tooltip teleportado

↓

getBoundingClientRect() do trigger → coordenadas absolutas

↓

Posiciona com top/left absoluto + scroll offset. Verifica viewport para fallback.

↓ mouseleave

utils.removeBody(tooltipEl, document.body) — removido do DOM

↓ mouseup (clique)

destroy() — fecha ao clicar

⚠ Fallback silencioso: left/right calculam se cabem no viewport. Se left < 0 ou left + width > window.innerWidth → posição muda para bottom e classe .after-none remove a seta. O dev não é notificado desta mudança.

API

<!-- text: texto do tooltip. title: h4 opcional acima do texto. -->
<!-- position: 'top'|'bottom'|'left'|'right' (default: top). left/right fazem fallback para bottom. -->
<!-- color: token (primary, success, danger, warning, gray) ou hex. -->
<!-- delay: string CSS ex '.3s' ou '300ms'. -->
<vx-tooltip
  text="Descrição detalhada da funcionalidade"
  title="Informação"
  position="top"
  color="primary"
  delay=".3s"
>
  <feather-icon icon="HelpCircleIcon" svgClasses="w-5 h-5" />
</vx-tooltip>

Props

Nome	Tipo	Default	Obrig.	Descrição
`text`	String \| Number	—	Não	Texto principal do tooltip. Na prática sempre presente nos 34 usos reais.
`title`	String \| Number	—	Não	Exibe `<h4>` acima do texto. Nunca usado no admin real.
`color`	String	—	Não	Cor de fundo via `_color.getColor()`. Aceita tokens ou hex. Único real: `gray`.
`position`	String	"top"	Não	`top` \| `bottom` \| `left` \| `right`. left/right têm fallback automático para bottom.
`delay`	Number \| String	"0s"	Não	Atraso de exibição (`transition-delay`). Único real: `".3s"` e `".2s"`.

Slots

Nome	Descrição
`default`	Elemento trigger — ao hover, exibe o tooltip. Sempre um `<feather-icon>` no admin real.

CSS classes

Classe	Descrição
`.con-vs-tooltip`	Wrapper do componente (posição relative)
`.vs-tooltip`	Elemento tooltip inserido no body
`.vs-tooltip-top/bottom/left/right`	Posição aplicada ao tooltip
`.vs-tooltip-{color}`	Cor de fundo (quando prop color definida)
`.after-none`	Remove a seta (::after) — aplicado no fallback de left/right

Onde é usado (principais)

Arquivo	Descrição
`src/views/configs/DynamicSettings.vue`	~50% dos usos — HelpCircleIcon ao lado de configs, com color="gray" e delay=".2s"
`src/views/chat-attendance/NewChat.vue`	Tooltips de ação no chat
`src/views/chat-attendance/GetOrderByMsg.vue`	Busca de pedido por mensagem
`src/components/meta/CountMessageTemplate.vue`	Templates de mensagem
`src/layouts/components/navbar/components/Bookmarks.vue`	Ícones de bookmark da navbar — position="bottom" delay=".3s"