0

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

ecm
  • 2,583
  • 4
  • 21
  • 29
Photosynthesis
  • 7
  • 5
  • Hi, I'm not too sure what the problem is - could you put your code into a working snippet so we can see what is working so far/what you've already tried - I don't see any tooltip information in the code for example, and we'd need to see the (relevant) CSS. Thanks. – A Haworth Jun 28 '21 at 10:22
  • Here you go: https://codepen.io/D4SH13/pen/jOmOWqb , sorry it was a bit late – Photosynthesis Jun 28 '21 at 11:29
  • Why don't you use the `title` property? `info icon` – Arsen Jun 28 '21 at 11:36
  • Better to put a proper SO snippet into your question, but what have you tried - have you considered attribute title and/or info such as is given in [link]https://stackoverflow.com/questions/32719294/how-to-change-the-style-css-of-a-tooltip and there are probably more questions like this, have a look around. – A Haworth Jun 28 '21 at 14:16

1 Answers1

0

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

NooberBoy
  • 152
  • 2
  • 11