当用户悬停时，如何显示更多信息

Question

我有一个信息图标，当用户悬停在上面时，可以看到更多信息。图标是png，我不想更改图像的位置，所以在我的情况下，有没有关于使用图像工具提示的想法？我也希望工具提示看起来像这样：

示例工具提示

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

现在，修改跨度元素的可见性。这样它就可以一直隐藏，直到工具提示悬停为止。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

希望这能解决您的问题