我发现当我拖动文本时确实会弹出一个小信息窗口的代码。问题是我想要图像而不是文本，我该怎么做？ 据我了解，所以我需要对“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>
最佳答案
您缺少结束语 </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>
关于javascript - 工具提示图像而不是文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44711355/