Display text to mouse positioning over word or image

Asked

Viewed 23,354 times

2

I would like to know how I can show a text when positioning the mouse over a word or image.

javascript html css
  • 2

    Question half too vague, for image has the attribute title, for text only if you put an A tag on the word the A tag also has the attribute title. However the style depends on the system and browser, may vary from one to another.

4 answers

7


as you did not specify Java in your question, so I believe you need a solution with CSS only.

Here is a possibility. To test pass the mouse over the bold snippet.

[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>

  • What are these selectors wrapped in square brackets?

6

With pure CSS you can do so:

#mostrar{
  display: none;
}

#passar_mouse:hover #mostrar{
  display:block;
  }
<div id="passar_mouse">passar mouse <div id="mostrar">mostrar este texto </div></div>

With jQuery you can do so:

$('#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

Do this in pure HTML using the <abbr tag

Passe o mouse <abbr title="Aqui está sua abreviação em html 5">aqui</abbr>

  • 1

    The HTML Element <abbr>(or HTML Abbreviation Element) only represents an abbreviation. Who contains the texts representing orientation information, related to the element to which it belongs is the attribute title. See the example

-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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.