图片提示

132

我正在使用工具提示。但是我想要在图像标签上显示该图像，例如当我将鼠标悬停在图像上时，工具提示应该起作用。我已经尝试过但在图像标签上没有为我工作。

html image tooltip

— 用户名
source

什么语言？HTML，C＃，Java ...

— 马提亚斯（Matthias）

4

使用document.getElementById('theImage').title='tooltip text'。

— 2012年

stackoverflow.com/questions/36275678/how-to-to-create-a-tooltip

— Pooja Kedar

问题在于<img>标记是自动关闭的，因此您不能在其中添加另一个元素。

— 贾斯汀

351

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

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

— 马蒂亚斯
source

3

我在正在运行的项目中设置了“工具提示”，即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>

展开摘要

— Paresh Shiyal
source

0

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

展开摘要

— 苏什玛·雷迪（Sushma Reddy）
source

-6

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

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

— 哈什·苏德勒
source

3

您缺少一些CSS才能使其真正起作用。如果您为.tooltip：hover .tooltiptext添加一个类，并正确放置.tooltiptext，则这可能是一种显示工具提示的好方法，您可以在其中更好地控制其提示。

— LKM

它们可能基于w3学校：w3schools.com/css/css_tooltip.asp 我同意这是一个不完整的解决方案，只是为那些想走这条路的人提供链接。

— 贾斯汀