Display text to mouse position over word or image

Question

Display text to mouse position over word or image

Navigation

#1 by (5 votes)
#2 by (4 votes)

1

Speak, people.

I'd like to know how I can display text by hovering over a word or image.

HTML5 - CSS - JS!

javascript html css

asked by anonymous 26.08.2016 / 21:21

2 answers

5

With pure CSS you can do this:

#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 this:

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

26.08.2016 / 21:28

Selecting the VALUE of a select with javascript or jquery [duplicate] How to mount buttons with Angular?

score 4 · Accepted Answer

As you have not specified javaScript in your question, then I believe you need a solution with CSS only.

There is a possibility. To test pass the mouse over the bold excerpt.

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