图片上的工具提示

Question

我正在使用工具提示。 但我希望它在图像标签上，就像当我将鼠标悬停在图像上时，工具提示应该可以工作。 我已经尝试过但没有为我在图像标签上工作。

Answer 1

为此，您可以使用图像的标准 HTML title 属性：

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

Answer 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" 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>

Answer 3

使用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>

Answer 4

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

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