Usando a função onmouseover eu consegui gerar no meu console mensagens simplesmente passando o mouse sobre o botão, minha pergunta, como faço pra aparecer aqueles balões de texto no mouse quando passo ele por cima de algum elemento?
Solucionado
Usando a função onmouseover eu consegui gerar no meu console mensagens simplesmente passando o mouse sobre o botão, minha pergunta, como faço pra aparecer aqueles balões de texto no mouse quando passo ele por cima de algum elemento?
Oi Pedro, para fazer esse balões daria pra usar um onmouseover também, pensando agora eu vejo a forma mais simples de fazer que seria:
Vc cria um elemento na tela posicionado com position absolute logo acima do elemento no qual vc quer que o balao apareça. Deixa ele por default como display:none, quando vc passar o mouse em cima coloca pra ele ficar display: block e volta a aparecer. Pronto, vc tem o balaozinho em cima quando o mouse estiver em cima (:
Esse seria um passo a mais do que vc está vendo agora no curso, fica o desafio, vai ser bem legal (:
Abraço!
Opa, e ai Pedro, tudo bem?
Então fiz da seguinte forma para você ver o modo de criar do zero um balão basico:
HTML: Criei um botao e uma mensagem dentro deste botao
<body>
<button type="button" onmouseover="showMessage()" onmouseout="hideMessage()">
Exemplo
<div class="mensagem" >Olá mundo</div>
</button>
</body>CSS:
body{
position:absolute;
width:100%;
height:100%;
}
button{
position:absolute;
margin:auto;
width:100px;
height:30px;
left:0;
right:0;
bottom:0;
top:0;
}
/* Aqui a mensagem ja está com o display none para já começar escondida*/
.mensagem{
display:none;
position:absolute;
top: -100%; /* Usei % para que voce entenda que da para se adaptar com o tamanho do botão/container ou qualquer outra coisa a qual a mensagem esta relacionada*/
left:0;
right:0;
margin: auto;
width:100px;
height:20px;
border:1px solid red;
/*Caso queira, por exemplo que fique ao lado
é so mudar o top para 0 e o left ou o right setar com 100%
top:0;
left:100%;
right:0;
margin: auto;
width:100px;
height:20px;
border:1px solid red;
*/
}JS:
let mensagem = document.querySelector(".mensagem") ;
// mostra a mensagem
function showMessage(){
mensagem.style.display = "block";
}
// esconde a mensagem
function hideMessage(){
mensagem.style.display = "none";
}Link de demonstraçao
https://codepen.io/pedrobslisboa/pen/WJxdrv?editors=1000
Aqui está um exemplo dele funcionando, deixei o border: 1px solid red ao inves de um background pois o que eu quero te mostra é o esqueleto de formaçao e nao o estilo :)
Espero ter ajudado