テキストの代わりにツールチップイメージ

テキストをドラッグすると小さな情報ウィンドウがポップされるコードが見つかりました。問題は、テキストの代わりにイメージでなければならないということです。私はそれをどのようにしますか？私が理解したようので、私は「divのクラスは=」ツールチップにいくつかの変更を加える必要がある「>ホバー上で」コード：テキストの代わりにツールチップイメージ

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

テキストの代わりにツールチップイメージ

答えて

関連する問題