工具提示圖片而不是文字

我發現在我拖動文本時彈出小信息窗口的代碼。問題是我想要的是，而不是文字，它應該是圖像我該怎麼做？據我瞭解，所以我需要在「DIV CLASS =」工具提示一些變化「>將鼠標懸停在」代碼：工具提示圖片而不是文字

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

來源

2017-06-23 Rokas Šimas

你缺少一個右</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>

來源

2017-06-23 00:49:01

我想你不會不知道我的意思。我認爲「懸停在」文本，它應該是一個圖像。你知道該怎麼做嗎？謝謝 –

這是小提琴你想要什麼？ https://jsfiddle.net/ty7c3zf3/ –

工具提示圖片而不是文字

回答

相關問題