图像工具提示

我正在使用工具提示。但是我想在图像标签上，就像当我鼠标在图像然后工具提示应该工作。我已经试过了，但没有为我工作的图像标签。

357477 次浏览
小开

您可以使用 image 的标准 HTML title 属性:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
小开

可以使用以下格式为图像生成工具提示。

<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>
小开

我设置工具提示在我的工作项目，这是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>

小开

使用 javascript，您可以为页面上的所有图像设置工具提示。

<!DOCTYPE html>
<html>
<body>
<img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
<img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
<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>


提交答案