How to show more information, when user hovers?

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">
                            <a href="#"><img src="images/info.png" alt="info icon"></a>
                        </div>
                        <div class="settings">
                            <a href="#"><img src="images/settings.png" alt="settings icon"></a>
                        </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">
                            <a href="#" src="images/info.png" alt="info icon"></a>
                        </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">
    <a href="#" src="images/info.png" alt="info icon"></a>
    <!-- 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