How to Add Tooltip to Image on Hover with CSS

How to add tooltip to image on hover with CSS

You can wrap the text into a <span></span> and show it on parent :hover

CSS

div.click-to-top span {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333;
  color: #fff;
}

div.click-to-top:hover span {
  display: block;
}

HTML

<div class="click-to-top">
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 1" />
  <span>Tooltip text</span>
</div>

Fiddle

Adding tooltip hover to an image with css

.tooltiptext2 is not a child of .image. Using .image + .tooltiptext2 instead of .image .tooltiptext2 makes the tooltip work.

https://jsfiddle.net/8Lmz2oLj/

Tooltip over small image

.check {  position: relative;  display: inline-block;  background-color: #5890ff;  width: 12px;  height: 12px;  border-radius: 100%;  color: #000;  text-decoration: none;}.check:after {  content: attr(data-tooltip);  position: absolute;  top: 0;  left: 14px;  width: 100px;  background-color: #000;  color: #FFF;  font-family: Arial, sans-serif;  font-size: 14px;  padding: 5px;  opacity: 0;  pointer-events: none;  transition: opacity .3s ease-in-out;  will-change: opacity;}
.check:hover:after {  opacity: 1;  pointer-events: auto;}

<a href="#" class="check" data-tooltip="Lorem ipsum dolor sit amet"></a>

Set tooltip over image on hover

Here is my solution, Its not a perfect solution, but it will give you a starting point.

Open the snippet in full screen

I am adding mouseover event listener to each area, Then on hover, I fetch their coordinates

var coordinates = this.getAttribute('coords').split(',') 

Here this means the area element

After getting the cordinates, I apply the first and last value of coords to
left and top value of the tooltip.

var areas = document.getElementsByTagName('area');var tooltip = document.getElementById('tooltip');for (var i = 0; i < areas.length; i++) {  areas[i].addEventListener("mouseover", updateTooltip)}
function updateTooltip() {  tooltip.innerHTML = this.getAttribute('data-text');  var coordinates = this.getAttribute('coords').split(',')  console.log(coordinates[0], coordinates[coordinates.length - 1]);  tooltip.style.left = coordinates[0] + 'px';  tooltip.style.top = coordinates[coordinates.length - 1] + 'px';}

.tooltip {  position: absolute;  z-index: 9999;  border: 1px solid black;  min-width: 100px;  max-width: 150px;  background: white;}
area {  position: relative;}
.parent{position:relative;}

<div class="parent"><img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
<map name="image-map">
        <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">                 <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">                  <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">                  <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">      <div class="tooltip" id="tooltip"></div>   </map>
</div>

Tooltip title on image using mouseover?

Ok. The easiest and simpliest way is to add title attribute to your image. Hovering this image will cause the native browser tooltip to show over the image.

Check this demo (place your mouse cursor over the image of pdf-icon).

Also these questions has already been asked here.

---

Related Topics