如何在鼠標輸入div的位置放置工具提示？

Question

我已經玩了一段時間了，無法自己弄清楚。我想要實現的是在div的頂部放置一個工具提示，但不是在中間，而是在用戶將鼠標放入div的位置。

任何想法如何實現這一目標？

Answer 1

這是非常簡單的工具提示

HTML：

<div data-tooltip="This is my tooltip"> 
<label>Name</label> 
<input type="text" /> 
</div> 

CSS：

div:hover:before { 
content: attr(data-tooltip); 
position: absolute; 
padding: 5px 10px; 
margin: -3px 0 0 180px; 
background: black; 
color: white; 
border-radius: 3px; 
} 

div:hover:after { 
content: ''; 
position: absolute; 
margin: 6px 0 0 3px; 
width: 0; 
height: 0; 
border-top: 5px solid transparent; 
border-right: 10px solid black; 
border-bottom: 5px solid transparent; 
} 

input[type="text"] { 
width: 125px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}