How to show more information, when user hovers? - html

Question

I have an info icon which when the user hovers over, is able to see more information. The icons are pngs and I DO NOT want to change the position of the image, so is there any idea about using tooltips with images in my case? I also would like the tooltip to look like this:
Example Tooltip
This is my HTML:
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Ipad Mode</p>
</div>
<div class="infoIcon">
<img src="images/info.png" alt="info icon">
</div>
<div class="settings">
<img src="images/settings.png" alt="settings icon">
</div>
</div>
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Mac Mode</p>
</div>
<div class="infoIcon">
</div>
<div class="settings"></div>
</div>
</div>
Thank you in advance
Codepen: https://codepen.io/D4SH13/pen/jOmOWqb

Answer 1

1st: Using Title tag in <img> element.
<div class="infoIcon">
<a href="#">
<img title="Extra Info" src="https://cdn.onlinewebfonts.com/svg/img_151567.png" alt="info icon" />
</a>
</div>
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/poPoeNy
2nd: Using <span> element.
Take a <span> element and put it inside your tootltip container.
<div class="infoIcon">
<!-- New span element -->
<span class="extraInfo">Extra Info</span>
</div>
Make the <span> postion: absolute relative to your tooltip container position: relative and add some styles to <span> element.
.infoIcon {
position: relative;
}
.extraInfo {
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
}
Now, change the visibility of the span element. So that it can stay hidden until the tooltip is hovered.
visibility: hidden;
i.e.
.extraInfo{
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
visibility: hidden;
}
Now, when your tooltip is hover make the span element visible.
.infoIcon:hover .extraInfo {
visibility: visible;
}
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/xxdxgrO
Hope this solves your problem