如何在鼠标输入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;
}