0

Preciso fazer um efeito parecido com um balão de conversa nas tags < a > do meu menu, assim como essa figura, quando passo o mouse( efeito hover) o balão aparece. Tentei fazer conforme esse site ( http://www.ilikepixels.co.uk/drop/bubbler/ ), mas não deu certo inserir a descrição da imagem aqui

Também preciso fazer o mesmo efeito quando passo o mouse em cima de uma imagem, aparece um "balão" com uma informação sobre a imagem

3
  • 1
    posta a parte do seu código que vc está tratando isso pra poder te ajudar melhor 27/07/2017 às 20:53
  • Tem como editar a pergunta e adicionar o código desta sua tentativa? Será mais fácil identificar sua dificuldade.
    – Woss
    27/07/2017 às 20:54
  • você vai utilizar o ToolTip="msg", pelo menos em WPF, um cara me ajudou e deu certo, você coloca no campo em que quer utilizar e vai aparecer :), para mais informações eu achei este site: wpf-tutorial.com/control-concepts/tooltips 14/11/2018 às 18:22

1 Resposta 1

2

.bubble:hover 
{
position: relative;
width: auto;
height: 120px;
padding: 10px;
background: #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 10px;
}
<a href="#" class="bubble">PASSE AQUI</a>

Tipo assim?

1
  • exatamente!!!!! Obrigado, deu certinho
    – Clayton
    27/07/2017 às 21:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .