How to add ToolTip on Image

Mas

6y1.2kLearn iOS Programming

Hello Memebers,

Hope you are doing good!!

How can i add tooltip on image..

I am trying to use this refernece,

https://www.youtube.com/watch?v=BmhuaNYA89c

But gettting error Attribute tooltip is not valid attribute of element img

Can any one guide me.

Thank you in advance!!

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Siddharth Gajbhiye6y ago
Accepted answer
Hi Sam

You can use the following methods:

Method 1:
>
<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.pdfspan>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">GOa>p>

body>
html>
Method 2: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"/>
Method 3:You can use the following format to generate a tooltip for an image.
<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip textspan>
div>
Harsh Shah6y ago
Using Title attribute you can directly look tooltip on image.
I try this code this can be work properly.
Thank you...
Jignesh Kumar6y ago
Hi Sam,

Please use below link,
https://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/
Joginder Banger6y ago
Hi, you can't add the title tag in image, but we have different option to do this.
"#" title="title to show">
  "source/to/file.ng" alt="photo" />
please try above line.
Mas6y ago
Rajanikant, I am using the HTML Attribute, Event getting error.

Can you please guide me more.

Thank you in advance!!
Rajanikant Hawaldar6y ago
You can use the standard HTML title attribute of image for this: