Ao criar um Tooltip, você pode escolher elementos específicos do site, como botões ou cabeçalhos, para adicionar seu Tooltip. O Intercom usa seletores CSS para permitir que você escolha esses elementos.
Quando você escolhe um elemento, o Tooltip gera automaticamente um Seletor CSS que indica onde ele deve ser adicionado ao elemento. Você pode ver o CSS para o elemento selecionado no canto inferior direito em Placement > Element matching:
Você pode querer adicionar manualmente o Seletor CSS por alguns motivos, que abordaremos mais adiante neste artigo. Se quiser editar manualmente o Seletor CSS que foi escolhido automaticamente, basta clicar dentro do campo e inserir o Seletor CSS que deseja selecionar:
Por que eu editaria o CSS de um Tooltip?
Existem alguns motivos pelos quais você pode querer editar o CSS ao escolher um elemento do site:
Seu produto mudou
Se seu produto ou site mudou desde que você publicou seus Tooltips, pode ser que o CSS original não funcione mais. Isso pode acontecer porque o elemento referenciado não existe mais ou foi movido para um lugar significativamente diferente. Nesse caso, você pode escolher um novo elemento usando o botão “Change Element” ou inserir manualmente um novo seletor.
Seu produto usa classes geradas dinamicamente
O CSS é usado para aplicar estilos aos elementos do seu site. Alguns frameworks web geram dinamicamente as classes CSS para aplicar esses estilos. Isso significa que os seletores CSS podem mudar toda vez que um usuário acessa seu produto ou site. Nesse caso, você não poderá usar o Seletor CSS automático para adicionar seu Tooltip.
Você pode editar alguns seletores para usar um curinga para que ele ignore a parte gerada dinamicamente do Seletor CSS. Isso significa editar o CSS para selecionar apenas uma parte que seja genérica para todos os users. No exemplo abaixo, editamos o seletor para procurar "button__" em vez de "button__2kbli", dado que a parte "button_" do CSS aparece para todos os users.
Como posso garantir que meu Tooltip seja exibido corretamente?
A melhor forma de garantir que seu Tooltip seja exibido corretamente é anotar o HTML do seu site com um atributo especial que o Intercom possa identificar.
Nota: Você precisará editar o HTML para fazer isso.
Se você sabe quais elementos do seu site deseja usar em um Tooltip, pode adicionar o atributo especial de dados data-intercom-target="..." a esses elementos.
Por exemplo, se quiser apontar para seu botão de início em um Tooltip, você pode adicionar data-intercom-target="Start button" a esse elemento. Ao anotar seu HTML dessa forma, é muito mais provável que pequenas mudanças no seu produto não afetem seus Tooltips.
<div data-intercom-target="Start button">
...
</div>
Nota: Se você anotar o HTML conforme mostrado acima, o construtor de Tooltip poderá destacar os elementos com a anotação data-intercom-target para que você possa selecioná-los.
Tem dúvidas?
Se você tiver mais dúvidas sobre como editar CSS em Tooltips, basta conversar conosco no Messenger e nós ajudaremos você. Aqui estão mais formas de testar seus Tooltips e garantir que eles funcionem como esperado.