Div跟随鼠标并避免浏览器边界

Question

我已经想过如何让div跟随鼠标，但是当div接近浏览器窗口的边缘时，如何让它重新定位？

例如，在Youtube上，如果将鼠标悬停在视频制作者名称上，则div 始终保留在浏览器中，永远不会离开屏幕。

Click here，将鼠标悬停在Lindsey Stirling上并重新调整浏览器大小，以获得实例。

有谁知道怎么做？

Answer 1

使用“title”属性。这个例子应该可以正常工作http://jsfiddle.net/8vj3k7zo/

<div title="no, I am 100% serious, please look at me!  Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>

当然，您无法设置标题工具提示的样式，因为它是本机浏览器实现的一部分。如果你想要一个样式的 div来浏览浏览器的边缘，你就不能这样做。

另一方面，如果您希望确保当鼠标靠近边缘时（而不是部分位于窗口边界外），整个自定义CSS工具提示始终位于浏览器内部，请查看这个优秀的图书馆：https://github.com/HubSpot/tooltip