Floating text when hovering over an image?

Navigation
1

I need to place a title that appears only when I pass the cursor over the image, I have tried with the title attribute but it does not work. 

<img src="mad.png" alt="Smiley face" width="42" height="42">
    
asked by Javier Antonio Aguayo Aguilar 15.03.2017 в 20:09
source

3 answers

1

Two ways:

1) Add the title tag: 

<div title="Texto flotante">Pon el cursor encima</div>

2) Use JS and CSS to put any box inside, as you can find in this link

    
answered by 15.03.2017 / 20:24
source
1

Another option would be by CSS , I leave you a very simple but functional example. 

/* Invisible texto */
figcaption {
  display:none; 
  transition: all .5s;
}
/* Visible texto */
figure:hover > figcaption {
  display:block;
  transition: all .5s;
}
<figure>
  <img src="http://oi41.tinypic.com/30mmgbd.jpg" alt="Smiley face" width="42" height="42" />
  <figcaption>Tu texto</figcaption>
</figure>
    
answered by 15.03.2017 в 21:27
0

You can make a tooltip simply by using the pseudoelector :after : 

document.addEventListener('DOMContentLoaded', function () {
  let figure = document.getElementById('photo');
  let directions = document.getElementById('directions');

  directions.addEventListener('change', function () {
    figure.setAttribute('tooltip-dir', this.value);
  });
});
body {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
}

figure {
  border-radius: 100%;
  display: block;
  height: 150px;
  position: relative;
  width: 150px;
}

img {
  border-radius: inherit;
  height: inherit;
  width: inherit;
}

figure:after {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 5px;
  color: #fff;
  content: attr(title);
  opacity: 0;
  padding: 6px 12px;
  position: absolute;
  left: 110%;
  top: 30px;
  transition: all .25s ease;
  visibility: hidden;
  white-space: nowrap;
}

figure[tooltip-dir="left"]:after {
  left: auto;
  right: 110%;
}

figure[tooltip-dir="bottom"]:after,
figure[tooltip-dir="top"]:after {
  left: 50%;
    right: auto;

  transform: translateX(-50%);
}

figure[tooltip-dir="bottom"]:after {
  bottom: auto;
  top: 110%;
}

figure[tooltip-dir="top"]:after {
  bottom: 110%;
  top: auto;
}

figure:hover:after {
  opacity: 1;
  visibility: visible;
}

select {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 12px;
}
<figure id="photo" title="¿Qué hay, bro?" tooltip-dir="left">
  <img src="https://s-media-cache-ak0.pinimg.com/564x/c0/f0/9f/c0f09f6c4d59f94f60f27ba6a05b8f57.jpg"/>
</figure>

<select id="directions">
  <option value="left" selected>Left</option>
  <option value="right">Right</option>
  <option value="bottom">Bottom</option>
  <option value="top">Top</option>
</select>
    
answered by 17.03.2017 в 16:03
Jquery Autocomplete local data or AJAX request Django: Error matching query does not exist