如何在用户悬停时显示更多信息？

Question

我有一个信息图标，当用户将鼠标悬停在该图标上时，可以看到更多信息。图标是 png，我不想更改图像的位置，那么在我的案例中是否有关于使用带有图像的工具提示的想法？我也希望工具提示看起来像这样：

Example Tooltip

这是我的 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>

提前致谢

代码笔：https://codepen.io/D4SH13/pen/jOmOWqb

Answer 1

1st: 在 <img> 元素中使用 Title 标签。

<div class="infoIcon">
    <a href="#">
        <img title="Extra Info" src="https://cdn.onlinewebfonts.com/svg/img_151567.png" alt="info icon" />
    </a>
</div>

最终代码

码笔：https://codepen.io/gautam25raj/pen/poPoeNy

第二个： 使用 <span> 元素。

取一个 <span> 元素并将其放入 tootltip 容器中。

<div class="infoIcon">
    <a href="#" src="images/info.png" alt="info icon"></a>
    <!-- New span element -->
    <span class="extraInfo">Extra Info</span>
</div>

使 <span> postion: absolute 相对于您的工具提示容器 position: relative 并向 <span> 元素添加一些样式。

.infoIcon {
    position: relative;
}

.extraInfo {
    position: absolute;
    color: #fff;
    background-color: #000;
    border-radius: 5px;
    padding: 2px 5px;
    width: 70px;
    text-align: center;
}

现在，更改 span 元素的可见性。这样它就可以保持隐藏状态，直到工具提示悬停为止。 visibility: hidden;

即

.extraInfo{
    position: absolute;
    color: #fff;
    background-color: #000;
    border-radius: 5px;
    padding: 2px 5px;
    width: 70px;
    text-align: center;
    visibility: hidden;
}

现在，当您的工具提示悬停时，使 span 元素可见。

.infoIcon:hover .extraInfo {
    visibility: visible;
}

最终代码

码笔：https://codepen.io/gautam25raj/pen/xxdxgrO

希望这能解决您的问题

如何在用户悬停时显示更多信息？

How to show more information, when user hovers?

html

css

image

tooltip

hover