Question

我发现在拖动文本时会弹出一个小信息窗口的代码。问题是我想要而不是文本它应该是图像我该怎么做？据我所知，所以我需要在＆＃34; div class =＆＃34; tooltip＆＃34;＆gt;将鼠标悬停在＆＃34; 代码：

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

工具提示图像而不是文本

1 个答案: