0

I have an image and I want to add a tooltip. this is the code:

<img src='info.svg' width='20' height='20' />

how do I add a tooltip?

bloodmage
  • 19
  • 3
  • maybe this might be useful https://www.w3schools.com/howto/howto_css_tooltip.asp – Ctac Nov 24 '21 at 12:28
  • We expect you try smething before asking, SO is not a free coding service. please read [ask] and [mcve] – Sfili_81 Nov 24 '21 at 12:40
  • 1
    Does this answer your question? [Tooltip on image](https://stackoverflow.com/questions/11716916/tooltip-on-image) – andreasv Nov 24 '21 at 12:42

2 Answers2

2

You can use title attribute for any html tags:

<img src='info.svg' width='20' height='20' title='Hello'/>

SergeiMinaev
  • 194
  • 3
  • 8
0

While SergeiMinaev's answer is absolutely great and it is evidently true that you can have a tooltip with the title attribute, I will focus on customizable alternatives. We can wrap a div around the image and a hidden div with absolute position that will only be displayed on hover.

.hoverable-image {
    position: absolute;
}

.hoverable-image > div {
    position: absolute;
    left: 40%;
    top: 40%;
}

.hoverable-image:not(:hover) > div {
    display: none;
}
<div class="hoverable-image">
    <img src="https://image.shutterstock.com/image-illustration/3d-small-people-jumped-pleasure-260nw-67359301.jpg">
    <div><span style="background-color: gray; color: purple;">Some Tooltip</span></div>
</div>
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175