Acho que você conhece o truque do CSS para desenhar triângulos CSS puros, certo? Você já tentou usar esse truque para desenhar o ponteiro da dica de ferramenta? Muitos designs de dicas de ferramentas contêm bordas e triângulos CSS anexados a essas dicas de ferramentas. Mas bem, você pode usar dois triângulos. Um triângulo tem o tamanho e a cor de fundo desejados da cor da borda da dica de ferramenta. E o segundo triângulo deve ser apenas 2 pixels mais estreito do que o primeiro, posicionado logo acima do primeiro e da cor do fundo da dica de ferramenta principal. Para ocultar a borda da dica de ferramenta na borda do triângulo (ponteiro), você deve colocar uma margem de -1px na direção da dica de ferramenta. E o truque principal, você pode usar: depois e: antes do objeto de dica de ferramenta para desenhar o ponteiro.
Bem, usei esse truque indefinidamente … e fiquei entediado, então escrevi um mixin de SCSS para tornar minha vida muito mais fácil. Então, aqui está um link para um êmbolo de trabalho, onde você pode experimentá-lo livremente. https://plnkr.co/edit/Eaq63K?p=preview
Você pode usar este mixin com não mais que:
@include pointer (‘bottom’, 30px, (preto, branco), 15px);
Como você pode ver, estou usando a metodologia BEM para nomeação de classes, portanto, nenhum conflito é esperado.
Boa codificação! : D