Javascript 动态定位div以创建工具提示

当链接上有悬停时，我想显示一个

div

（比如带有一些自定义内容（如图像和文本）的

工具提示。
就像在Facebook上一样，当你把鼠标悬停在某人的名字上时，你会得到他们的简短个人信息

我想对页面上的所有链接使用一个
div
（带更新内容）。
要实现这一点，我需要知道如何通过JavaScript动态地将我的
div
定位到链接旁边

希望支持所有主要浏览器
为什么不使用
标题
属性？我知道你不能在
title
属性中添加标记，但是你可以使用很棒的jquery插件，比如或来获得非常漂亮的工具提示

否则这些库会为您做任何事情，您只需破解源代码并用您的div替换title属性。也就是说，将其备份，使title属性包含包含数据的
div
元素的
id
或
class
，并在工具提示div中显示
div

这个插件似乎还使用了一个div，并将其转换为一个弹出窗口，因此它可能会有所帮助，尽管它似乎是从2008年开始的。我不知道它是否正在维护或更新

否则，您唯一的选择是
onMouseOver
对于每个元素，获取鼠标位置和div到鼠标位置的绝对位置。这将是最简单的实现。
类似于：

（函数（$）{
$（文档）.ready（函数（）{
$（'a'）。悬停(
函数（）{
变量$this=$（this），
p=$this.position（），
w=$this.width（），
h=$this.height（）；
var$tooltip=$（''）.css({
显示：“内联框”，
位置：'绝对'，
左：p.left，
顶部：p.top-h-5，
背景：“黄色”，
边框：“纯色1px黑色”
});
$tooltip.text（'Hello World！'）；
$tooltip.appendTo（'body'）；
},
函数（）{
$（“#工具提示”）.remove（）；
}
);
});
})（jQuery）；
您能提供一些代码吗？
(function ($) {
    $(document).ready(function () {
        $('a').hover(
            function () {
                var $this = $(this),
                    p = $this.position(),
                    w = $this.width(),
                    h = $this.height();

                var $tooltip = $('<div id="tooltip">').css({
                    display: 'inline-box',
                    position: 'absolute',
                    left: p.left,
                    top: p.top - h - 5,
                    background: 'yellow',
                    border: 'solid 1px black' 
                });

                $tooltip.text('Hello World!');

                $tooltip.appendTo('body');
            },
            function () {
                  $('#tooltip').remove();
            }
        );
    });
})(jQuery);