Eu gostaria de saber como posso mostrar um texto ao posicionar o mouse sobre uma palavra ou imagem.
5 Respostas
como não especificou javaScript na sua pergunta, então acredito que precise de uma solução com CSS apenas.
Segue uma possibilidade. Para testar passe o mouse sobre o trecho em negrito.
[data-tooltip] {
position: relative;
font-weight: bold;
}
[data-tooltip]:after {
display: none;
position: absolute;
top: -5px;
padding: 5px;
border-radius: 3px;
left: calc(100% + 2px);
content: attr(data-tooltip);
white-space: nowrap;
background-color: #0095ff;
color: White;
}
[data-tooltip]:hover:after {
display: block;
}
<div>
Sed id nibh ac diam congue dictum. In bibendum lorem eu ligula molestie hendrerit nec vel nulla. Proin lacinia mi a leo euismod, eget semper eros pellentesque. Vivamus facilisis ac justo ut porttitor. Praesent consectetur tortor erat, a scelerisque turpis pretium non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue sapien ac posuere interdum. Cras rhoncus mi sapien, vel ultrices nibh vulputate sit amet. Pellentesque a semper neque. Nunc auctor rutrum metus ac fermentum. Sed rutrum, mi eu varius luctus, erat massa finibus dolor, et vehicula enim lorem congue augue. Cras non velit feugiat, malesuada velit sit amet, porta nisi. <span data-tooltip="Proin gravida fringilla venenatis">Maecenas sit amet gravida odio.</span>
</div>
Com CSS puro pode fazer assim:
#mostrar{
display: none;
}
#passar_mouse:hover #mostrar{
display:block;
}
<div id="passar_mouse">passar mouse <div id="mostrar">mostrar este texto </div></div>
Com jQuery pode fazer assim:
$('#passar_mouse').mouseover(function(){
$('#mostrar').css('display', 'block');
});
$('#passar_mouse').mouseout(function(){
$('#mostrar').css('display', 'none');
});
#mostrar{
display:none;
}
<dia id="passar_mouse">Passar o mouse</div>
<div id="mostrar">Mostrar este texto ao passar o mouse</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Faça isso em HTML puro usando a Tag <abbr
Passe o mouse <abbr title="Aqui está sua abreviação em html 5">aqui</abbr>
Acredido que o jeito mais prático é utilizar a propriedade title direto em HTML, assim:
<!--Exemplo de imagem com texto ao parar o mouse em cima-->
<img src="https://miro.medium.com/max/1400/0*VU152GltXiWeD0Xy.png" title="Texto stackoverflow sobre a imagem" alt="stackoverflow logo" width="120" height="47"/>
<!--Exemplo de textos com outros textos ao parar o mouse em cima-->
<p title="Texto sobre o parágrafo">Texto de teste com <span title="Texto sobre a palavra SPAN">SPAN</span> e texto por cima</p>
<body>
<h1><mark style="background-color: skyblue;">Tags em HTML</mark></h1>
<p><mark style="background-color: peachpuff;">Em HTML5, podemos inserir os elementos da lista a seguir. Passe o mouse sobre as palavras para descobrir qual tag deverá utilizar em cada caso.</mark></p>
<ul>
<li><abbr title="<p>">Parágrafos</abbr></li>
<li><abbr title="<h1>;<h2>;<h3>">Títulos</abbr></li>
<li><abbr title="<img>">Imagens</abbr></li>
<li><abbr title="<q>">Abreviações</abbr></li>
<li><abbr title="<ol>">Listas numeradas</abbr></li>
<p>💡Espero ter ajudado.💡 </p>
</ul>
</body>
title
, para texto so se colocar uma tag A na palavra a tag A também tem o atributotitle
. Porem o estilo depende do sistema e navegador, pode variar de um para outro.