Tooltip on image

Question

I am using the tooltip. But I want that on image tag, like when I mouseover the image then the tooltip should work. I have tried but not working for me on image tag.

Use `document.getElementById('theImage').title='tooltip text'`. — Jay, Jul 30 '12 at 07:31
http://stackoverflow.com/questions/36275678/how-to-create-a-tooltip — Pooja Kedar, Mar 16 '17 at 05:27
The problem is the tag is self closing, so you can't add another element inside of it. — Justin, May 13 '20 at 01:34

Matthias · Answer 1 · 2018-09-04T17:01:43.667

442

You can use the standard HTML title attribute of image for this:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

edited Sep 04 '18 at 17:01

answered Jul 30 '12 at 07:25

Matthias

12,704
13
35
56

score 11 · Answer 2 · answered Jan 11 '20 at 06:42

I am set Tooltips On My Working Project That Is 100% Working

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>

<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>

</body>
</html>

Is there any possibility to remove the line that is generated from the span? — Spartan 117, Jun 28 '22 at 08:25
I tried but apparently, I wasn't able to remove that underline that is generated by the span element under the picture — Spartan 117, Jun 29 '22 at 12:07

score 1 · Answer 3 · answered Jul 08 '20 at 17:40

Using javascript, you can set tooltips for all the images on the page.

<!DOCTYPE html>
<html>
    <body>
    <img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
    <img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
     <script>
     //image objects
     var imageEls = document.getElementsByTagName("img");
     //Iterating
     for(var i=0;i<imageEls.length;i++){
        imageEls[i].title=imageEls[i].alt;
        //OR
        //imageEls[i].title="Title of your choice";
     }
        </script>
    </body>
</html>

score -8 · Answer 4 · answered Oct 07 '18 at 01:03

-8

You can use the following format to generate a tooltip for an image.

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>

answered Oct 07 '18 at 01:03

Hasshi Sudler

1

3

You're missing some CSS to make this actually work. If you add a class for .tooltip:hover .tooltiptext, and position .tooltiptext properly, this might be a fine way to show a tooltip where you have more control over its presentation. – LKM Feb 17 '19 at 07:14
1

They are probably basing off of w3 schools: https://www.w3schools.com/css/css_tooltip.asp I agree it's an incomplete solution, just providing link for those who want to go this route. – Justin May 13 '20 at 01:34

Tooltip on image

4 Answers4

Linked

Related