工具提示图像而不是文本

Question

我发现当我在文本上拖动时，代码确实会弹出一个小信息 window。问题是我想要它而不是文本，它应该是图像我该怎么做？据我了解，因此我需要在 "div class="tooltip">Hover over" 中进行一些更改代码：

<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;
top: 100%;
left: 50%;
margin-left: -170px;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
 }
 </style>
 <body style="text-align:center;">

 <h2>Bottom Tooltip</h2>
 <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over  
  <span class="tooltiptext">Firebeatz<img  src="https://static.wixstatic.com/media/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png/v1/fill/w_511,h_170,al_c/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png">
 </div>

 </body>
 </html>

Answer 1

您缺少结束 </span> 标记。将 HTML 更改为以下内容（注意添加 </span>）。

<body style="text-align:center;">

 <h2>Bottom Tooltip</h2>
 <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over  
  <span class="tooltiptext">Firebeatz<img  src="https://static.wixstatic.com/media/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png/v1/fill/w_511,h_170,al_c/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png"></span>
 </div>

 </body>

工具提示图像而不是文本

Tooltip image instead of text

html

javascript

tooltip