How to add ToolTip on Image

Question

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

Siddharth Gajbhiye · 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.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 > 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 text span > div >

Rajanikant Hawaldar · Answer

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

Harsh Shah · Answer

Using Title attribute you can directly look tooltip on image. I try this code this can be work properly. Thank you...

Jignesh Kumar · Answer

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 Banger · Answer

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.

Mas · Answer

Rajanikant, I am using the HTML Attribute, Event getting error. Can you please guide me more. Thank you in advance!!