2

Eu gostaria de saber como posso mostrar um texto ao posicionar o mouse sobre uma palavra ou imagem.

1
  • 2
    Pergunta meio vaga demais, para imagem tem o atributo title, para texto so se colocar uma tag A na palavra a tag A também tem o atributo title. Porem o estilo depende do sistema e navegador, pode variar de um para outro. Commented 26/08/2016 às 19:26

5 Respostas 5

7

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>

1
  • O que são esses seletores envoltos em colchetes?
    – yoyo
    Commented 30/04/2021 às 19:58
6

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>

0

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>

1
  • 1
    O Elemento HTML <abbr>(ou Elemento de Abreviação HTML) apenas representa uma abreviação. Quem contém os textos representando informações de orientação, relacionados ao elemento a que pertence é a atributo title. Veja o exemplo Commented 19/08/2021 às 5:06
0

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>

-2

<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="&lt;p&gt;">Parágrafos</abbr></li>
       <li><abbr title="&lt;h1&gt;;&lt;h2&gt;;&lt;h3&gt;">Títulos</abbr></li>
       <li><abbr title="&lt;img&gt;">Imagens</abbr></li>
       <li><abbr title="&lt;q&gt;">Abreviações</abbr></li>
       <li><abbr title="&lt;ol&gt;">Listas numeradas</abbr></li>
       <p>💡Espero ter ajudado.💡 </p>
   </ul>

</body>

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 .