图片上的工具提示
Posted
技术标签:
【中文标题】图片上的工具提示【英文标题】：Tooltip on image 【发布时间】：2012-07-27 20:24:39 【问题描述】：我正在使用工具提示。但我希望在图像标签上使用它，就像当我将鼠标悬停在图像上时，工具提示应该可以工作。我已经尝试过，但不适用于图像标签。
【问题讨论】：
什么语言？ html、C#、Java、...？ 使用document.getElementById('theImage').title='tooltip text'。
***.com/questions/36275678/how-to-create-a-tooltip
问题是 您可以为此使用图像的标准 HTML 标题属性：
<img src="source of image" title="this will be displayed as a tooltip"/>
【讨论】：
【参考方案2】：我在我的工作项目上设置了工具提示，该项目 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" /><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>【讨论】：
【参考方案3】：使用javascript，您可以为页面上的所有图像设置工具提示。
<!DOCTYPE html>
<html>
<body>
<img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" >
<img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" >
<script>
//image objects
var imageEls = document.getElementsByTagName("img");
//Iterating
for(var i=0;i<imageEls.length;i++)
imageEls[i].title=imageEls[i].alt;
//OR
//imageEls[i].title="Title of your choice";
</script>
</body>
</html>【讨论】：
【参考方案4】：您可以使用以下格式为图像生成工具提示。
<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>
【讨论】：
您缺少一些 CSS 以使其真正起作用。如果您为 .tooltip:hover .tooltiptext 添加一个类，并正确定位 .tooltiptext，这可能是显示工具提示的好方法，您可以更好地控制它的呈现方式。 他们可能基于 w3 学校：w3schools.com/css/css_tooltip.asp 我同意这是一个不完整的解决方案，只是为那些想走这条路的人提供链接。以上是关于图片上的工具提示的主要内容，如果未能解决你的问题，请参考以下文章