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?
hoje, com a Alura e o Google Gemini
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