如何将工具提示添加到 html 中的图像？ [复制]答案

【问题标题】：How to add a tooltip to an image in html? [duplicate]如何将工具提示添加到 html 中的图像？ [复制]
【发布时间】：2022-01-02 20:12:40
【问题描述】：

我有一张图片，我想添加一个工具提示。这是代码：

<img src='info.svg' width='20' height='20' />

如何添加工具提示？

【问题讨论】：

也许这可能有用w3schools.com/howto/howto_css_tooltip.asp
我们希望您在询问之前先尝试一下，SO 不是免费的编码服务。请阅读How to Ask和minimal reproducible example
这能回答你的问题吗？ Tooltip on image

标签： html css tooltip

【解决方案1】：

您可以为任何 html 标签使用title 属性：

<img src='info.svg' width='20' height='20' title='Hello'/>

【讨论】：

【解决方案2】：

虽然 SergeiMinaev 的回答非常棒，而且很明显你可以拥有带有 title 属性的工具提示，但我将专注于可定制的替代方案。我们可以在图像周围包裹一个div 和一个带有absolute 位置的隐藏div，它只会在hover 上显示。

.hoverable-image {
    position: absolute;
}

.hoverable-image > div {
    position: absolute;
    left: 40%;
    top: 40%;
}

.hoverable-image:not(:hover) > div {
    display: none;
}

<div class="hoverable-image">
    <img src="https://image.shutterstock.com/image-illustration/3d-small-people-jumped-pleasure-260nw-67359301.jpg">
    <div><span style="background-color: gray; color: purple;">Some Tooltip</span></div>
</div>

【讨论】：