Html 图片上的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11716916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tooltip on image
提问by user1528786
I am using the tooltip. But I want that on image tag, like when I mouseover the image then the tooltip should work. I have tried but not working for me on image tag.
我正在使用工具提示。但是我希望在图像标签上使用它，例如当我将鼠标悬停在图像上时，工具提示应该可以工作。我已经尝试过但在图像标签上对我不起作用。
回答by Matthias
You can use the standard HTML title attribute of image for this:
您可以为此使用图像的标准 HTML 标题属性：
<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
回答by Paresh Shiyal
I am set Tooltips On My Working Project That Is 100% Working
我在 100% 工作的工作项目上设置了工具提示
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.size_of_img{
width:90px}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>
<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>
</body>
</html>回答by Hasshi Sudler
You can use the following format to generate a tooltip for an image.
您可以使用以下格式为图像生成工具提示。
<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>
