Passar para o conteúdo principal

Entendendo as opções de layout e posição para Tooltips

Aprenda quando usar incorporado versus sobreposto e alinhamento.

Escrito por Beth-Ann Sher

Ao criar um Tooltip, você escolherá um elemento no seu site para direcionar. O Intercom então usa seletores CSS para identificar os elementos que você escolheu.

Como nenhum site é igual, adicionamos vários recursos de layout que ajudarão você a oferecer a melhor experiência para seus users finais. Isso garante que o Tooltip pareça nativo do seu aplicativo e não interfira na experiência do usuário que você projetou.

Layout Sobreposto vs. Incorporado

Ao escolher um layout, você deve primeiro considerar como o Tooltip será inserido na sua página web.

Isso pode ser feito selecionando uma das duas opções de layout:

  • Sobreposto - Sobrepõe o Tooltip sobre os elementos existentes na página.

  • Incorporado - É posicionado em linha e move os elementos na página para abrir espaço.

Alinhamento do Tooltip

O alinhamento selecionado determinará como o Tooltip será posicionado em relação ao elemento que você escolheu, dando maior controle sobre onde o Tooltip aparece.

Existem 3 opções de alinhamento para escolher:

  • Texto no elemento - Alinha ao texto, se existir dentro do elemento.

  • Dentro do elemento - Alinha (por padrão) ao lado direito do elemento.

  • Ao lado do elemento - Alinha (por padrão) fora do elemento, no lado direito.

Refine ainda mais o alinhamento usando as opções para mover o alinhamento do Tooltip para a esquerda, direita, cima, baixo ou meio. Use esses controles se quiser mover o Tooltip das posições padrão.

Deslocamento

Para aquele ajuste final, os controles de deslocamento permitem mover o tooltip para a esquerda ou direita, cima ou baixo. São especialmente úteis quando você quer se aproximar ou afastar do elemento que deseja destacar com o Tooltip.

O deslocamento Top e Left do Tooltip deve ser definido entre -1000 e 1000 pixels. Se qualquer deslocamento do Tooltip estiver fora do intervalo de -1000 a 1000 pixels, salvar o Tooltip falhará, e o construtor de Tooltip pode mostrar apenas uma mensagem genérica de erro sem detalhes específicos. Para corrigir a falha ao salvar o Tooltip, altere ambos os deslocamentos Top e Left para que estejam dentro de -1000 a 1000 pixels e salve o Tooltip novamente.

O que fazer se você não conseguir posicionar o Tooltip corretamente

Se você ainda estiver com dificuldades para posicionar o Tooltip corretamente, pode haver alguns fatores a considerar:

  • Seu produto tem elementos com larguras fixas - O elemento que você selecionou pode ter larguras fixas aplicadas pelos seus desenvolvedores. Nesse caso, incorporar um Tooltip pode não renderizar como esperado. Tente conversar com sua equipe de desenvolvimento para analisar o HTML e CSS da página.

  • Seu produto usa classes geradas dinamicamente - A renderização pode parecer correta no construtor de Tooltip, mas não como esperado ao visualizar ou testar no ambiente ao vivo. Nesse caso, geralmente há algum conteúdo dinâmico que altera o layout da página, movendo o Tooltip para uma posição inesperada.

Tente solucionar esses problemas escolhendo manualmente o seletor CSS.

Tem dúvidas?

Se você tiver mais dúvidas sobre como editar um Tooltip, basta conversar conosco no Messenger e nós ajudaremos você.

Respondeu à sua pergunta?