图像上的工具提示

Question

图像上的工具提示

我正在使用工具提示.但我希望在图像标记上,就像我将鼠标移到图像上时,工具提示应该可以工作.我试过但不是在图像标签上为我工作.

Answer 1

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 7

我在 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，2 月前
查看次数：	242910 次
最近记录：	7 年前