# Como corrigir o Hotspot que não exibe tooltips no Ultimate Addons

Os Hotspot tooltips do Ultimate Addons não aparecem quando o gatilho do tooltip está configurado para clique em vez de hover, quando o campo de conteúdo do tooltip está vazio, ou quando outro elemento da seção cobre o balão por z-index ou overflow.

## O que é Hotspot tooltips Ultimate Addons?

Os Hotspot tooltips do Ultimate Addons (UAEL) são os balões de conteúdo que aparecem ligados a cada ponto marcado pelo widget Hotspots, usado sobre uma imagem para destacar áreas com texto, links ou mídia. Segundo a documentação do UAEL, cada hotspot pode exibir um tooltip, abrir um link ou disparar um popup do Elementor, e o widget oferece controles para o gatilho, as animações e o estilo da seta do balão.

Quando o tooltip não aparece, o ponto do hotspot continua visível na imagem, mas o balão de conteúdo não surge ao passar o mouse ou tocar no ponto. Isso costuma vir de uma combinação de configuração do próprio widget (gatilho definido para clique, conteúdo do tooltip vazio) com problemas de renderização no frontend, como o balão sendo recortado pelo overflow da seção ou coberto por outro elemento com z-index maior.

## Como identificar

- O ponto do hotspot aparece sobre a imagem, mas nenhum balão de tooltip surge ao passar o mouse sobre ele no frontend.
- O tooltip abre vazio, sem o texto, link ou mídia que foi configurado no conteúdo do hotspot.
- O tooltip aparece pela metade ou cortado na borda da seção, como se estivesse escondido dentro de uma caixa.
- No desktop o tooltip funciona ao passar o mouse, mas no celular o toque no ponto não abre nada.
- No console do navegador (F12) surgem erros de JavaScript do Elementor logo ao carregar a página com o widget Hotspots.

**Antes de começar:** Antes de alterar overflow, z-index ou trocar plugins e tema em producao, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso o layout da seção quebre.

## Como prevenir

- Ao adicionar cada ponto do hotspot, preencha o conteúdo do tooltip na hora e defina o gatilho (hover ou clique) de forma consistente em toda a página.
- Evite Overflow Hidden nas seções que contêm widgets com balões flutuantes, como Hotspots, para não recortar o tooltip sem perceber.
- Mantenha o Ultimate Addons for Elementor e o Elementor sempre na versão estável mais recente, validando em staging antes de atualizar em produção.
- Cheque o console do navegador após instalar novos plugins, pois um erro de JavaScript de terceiros pode derrubar a inicialização dos widgets do Elementor.

Erros relacionados

- [Como corrigir Elementor com widgets que não aparecem](https://full.services/wp-fixer/corrigir-elementor-widgets-nao-aparecem/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)
- [Como corrigir erros de JavaScript no console ao usar o Elementor](https://full.services/wp-fixer/corrigir-erro-javascript-console-elementor/)

## Causa

- O gatilho do tooltip do hotspot está definido como clique (On Click) e o visitante espera o comportamento de passar o mouse (On Hover), então o balão nunca surge no hover.
- O campo de conteúdo do tooltip daquele ponto específico ficou vazio: o ponto foi adicionado, mas o texto, link ou mídia do tooltip não foi preenchido no repeater do widget.
- A seção ou coluna que contém o widget Hotspots está com Overflow definido como Hidden, recortando o balão do tooltip que se estende para fora dos limites do container.
- Outro elemento da página (um cabeçalho fixo, um popup ou uma coluna com z-index alto) fica por cima do tooltip, escondendo o balão mesmo quando ele é gerado.
- Um erro de JavaScript de outro plugin ou tema interrompe o script do Elementor antes do UAEL inicializar o hotspot, impedindo o tooltip de responder ao hover ou ao toque.

## Como resolver

1. Confira o gatilho do tooltip no widget Hotspots: Abra a página no editor do Elementor, selecione o widget Hotspots e localize o controle de gatilho do tooltip. Defina o comportamento esperado, normalmente passar o mouse, para que o balão abra ao apontar o cursor sobre o ponto.

```
Editor do Elementor -> clique no widget Hotspots
Aba Content -> grupo Tooltip -> ajuste o gatilho (Trigger) para On Hover
Salve e visualize a página no frontend
```

2. Preencha o conteúdo do tooltip de cada ponto: Ainda no widget, abra a lista de pontos (hotspots) e edite cada item. Confirme que o conteúdo do tooltip daquele ponto está preenchido com o texto, link ou mídia desejado. Um ponto sem conteúdo abre um balão vazio ou não abre.

```
Editor do Elementor -> widget Hotspots -> abra cada item da lista de pontos
Preencha o campo de conteúdo do tooltip (texto, link ou mídia) do ponto
Repita para todos os pontos que precisam de balão
```

3. Libere o overflow da seção e da coluna: Se o balão aparece cortado, selecione a seção e a coluna que envolvem o widget e ajuste o Overflow para Default, em vez de Hidden. O Overflow Hidden recorta o tooltip que se estende para fora do container.

```
Editor do Elementor -> selecione a Seção -> aba Advanced -> Overflow -> Default
Selecione a Coluna -> aba Advanced -> Overflow -> Default
Atualize e confira se o balão aparece inteiro
```

4. Resolva sobreposição por z-index: Se outro elemento cobre o tooltip, aumente o z-index do widget Hotspots ou da coluna que o contém para que o balão fique acima dos vizinhos. Use o snippet de CSS abaixo como referência do valor a aplicar no campo Custom CSS.

```
Editor do Elementor -> widget Hotspots -> aba Advanced -> Z-Index -> aumente o valor
Se necessário, aplique o CSS do bloco de código abaixo no Custom CSS do widget
Confira no frontend se o tooltip fica por cima dos demais elementos
```

5. Isole conflito de JavaScript no frontend: Se o tooltip ainda não responde ao hover ou ao toque, desative os outros plugins um a um e troque para um tema padrão, recarregando a página a cada teste para identificar o que interrompe o script do Elementor antes do UAEL inicializar o hotspot.

```
Painel WP -> Plugins -> desative os demais plugins um a um
Painel WP -> Aparencia -> Temas -> ative um tema padrão (ex.: Twenty Twenty-Four)
Abra o console do navegador (F12 -> Console) e recarregue a página a cada teste
```


## Código

```css
/* Aplique no Custom CSS do widget Hotspots (aba Advanced).
   Garante que o tooltip fique por cima e nao seja recortado. */
selector .uael-hotspot-wrap {
    z-index: 99;
}
selector .uael-tooltip-content,
selector .uael-hotspot-content {
    z-index: 999;
    visibility: visible;
    opacity: 1;
}
/* Evita que a secao recorte o balao do tooltip. */
selector,
selector .elementor-widget-container {
    overflow: visible;
}
```

## Perguntas frequentes

### Por que o tooltip do meu hotspot não aparece ao passar o mouse

Quase sempre o gatilho do tooltip está definido como clique em vez de passar o mouse. Abra o widget Hotspots no editor do Elementor, vá ao grupo Tooltip e ajuste o gatilho para On Hover, depois salve e teste no frontend.

### O balão do tooltip abre vazio, o que faço

Um balão vazio indica que o conteúdo daquele ponto não foi preenchido. Edite cada item da lista de pontos do widget e confirme que o campo de conteúdo do tooltip tem texto, link ou mídia, conforme a documentação do widget Hotspots do Ultimate Addons.

### Por que o tooltip aparece cortado na borda da seção

O corte costuma vir do Overflow definido como Hidden na seção ou na coluna que envolve o widget. Na aba Advanced da seção e da coluna, mude o Overflow para Default, assim o balão pode se estender para fora do container sem ser recortado.

### O tooltip funciona no desktop mas não abre no celular

No mobile não existe o evento de passar o mouse, então um gatilho de hover pode não responder ao toque. Reveja o comportamento do tooltip para o mobile e teste tocando diretamente no ponto, ajustando o gatilho do widget se necessário.

### Outro elemento está cobrindo o tooltip do hotspot

Quando um cabeçalho fixo ou uma coluna vizinha fica por cima do balão, aumente o z-index do widget Hotspots ou da coluna que o contém, na aba Advanced. Isso coloca o tooltip acima dos elementos que estavam escondendo o balão.

### Como sei se o problema é do Ultimate Addons ou de outro plugin

Desative os demais plugins um a um e troque para um tema padrão, recarregando a página a cada teste. Se o tooltip voltar a abrir, reative os itens até encontrar o plugin ou tema cujo JavaScript interrompe a inicialização do widget.

### Atualizar o Ultimate Addons pode resolver o tooltip que não abre

Pode, quando o problema vem de um bug já corrigido ou de incompatibilidade com uma versão recente do Elementor. Atualize o Ultimate Addons e o Elementor em staging, limpe o cache e regenere os arquivos de CSS antes de testar de novo no frontend.

**Fonte:** [Ultimate Addons for Elementor — Hotspots Widget](https://ultimateelementor.com/widgets/hotspots/)