当鼠标hover在用户名上，会弹出一张名片，然后可以把鼠标继续移动到名片上进行一些操作：
而且，根据用户名在当前窗口的位置不同，名片的位置是变化的，如上侧下侧右侧等：
查看了一下源码，是在body中动态生成了一个子元素，但是不清楚实现的原理。Bootstrap的弹窗好像能做到类似的效果，但是名片又是定制化的，不知道怎么实现（Bootstrap不是很熟）。
请高手指点一下这种效果实现的原理（定位），以及是否有相关的资源、插件等，多谢！
还有最后一点问题，就是如何实现：当鼠标移动到弹窗上面，弹窗不消失？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap Popover</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<div>
测试文字测试文字测试文字测试文字<a href="#" data-container="body" data-toggle="popover" data-placement="bottom">李四</a>测试文字测试文字测试文字测试文字测试文字
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("a").popover({
html: true,
trigger: 'hover',
content: '<div>Jason<button>关注</button></div>',
delay: { "show": 500, "hide": 1000 }
})
})
</script>
</body>
</html>名片本身是position:absolute的，然后通过mouseenter的操作，
拿到event的screenX,screenY，设置left/top
做的好一点的，就是延迟消失，并且鼠标转到名片上之后，取消延迟消失，保持一直显示
bootstrap上有现成的，包括内部也可以使用函数或者html直接写好
append:
$("a").popover({
trigger: "manual",
html: true,
animation: false,
content: function () {
return '<div class="hover-hovercard">313213132131</div>';
}
})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});我之前说的setTimeout之类的是原生的写法