Entrar Ainda não tem acesso?
4
respostas

Aula Efeito Balãozinho de Texto

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pseudoelementos e atividade Triângulo na legenda

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Anteriormente fizemos o exercício do Tool-tip:

.icones-redes-sociais a:hover::after,
.icones-redes-sociais a:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    text-indent: 0;
    width: 300%;
    background: black;
    font-size: .75em;
    padding:20px;
}

Nesse para adicionar o efeito do balãozinho eu coloco esse CSS onde? Pois coloquei com o mesmo nome, aí só aparece o triângulo, some o tool-tip

..icones-redes-sociais a:hover::after,
..icones-redes-sociais a:focus::after {
     content: '';
    width: 1em;
    height: 1em;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(.5em) rotate(45deg);
    }
4 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Faaala Ailyram tudo bom? consegue me mandar o trecho de html associado com esse css para eu conseguir testar? ou subir seu projeto no github?

por Dayane Soares da Silva
| 170.3k xp | 18 posts

E aí Mary, blza?

Você usou o after e nesse caso abre uma declaração separada usando before. Se usar o after ele vai sobrepor.

..icones-redes-sociais a:hover::before,
..icones-redes-sociais a:focus::before {
     content: '';
    width: 1em;
    height: 1em;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(.5em) rotate(45deg);
    }

Abraço

por Leonardo Leite Meira
| 93.4k xp | 42 posts
Autónomo

Funcionou para mim Dayane, obrigado.

por Priscila Saldanha Barros
| 125.3k xp | 9 posts

Oi pessoal tive o mesmo problema da Mary, valeu pela dica Dayane funcionou direitinho aqui . =]