最近碰到一个需求 要求点击时浮现气泡框来展示文本内容 理想中的效果如下
网上搜了下 看到bootstrap有现成popover 插件用来实现这个的 ，现成的轮子不用白不用 引入bootstrap 的css和js 就可以开始了
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
引入头文件后，在需要点击的地方写上一些内置的属性，笔者这里因为业务要求 所以用的是a标签
<a type="button" title="" data-container="body" data-toggle="popover" data-placement="left" data-content="气泡的内容" }">查看详情</a>
简单说下 一些属性，title的内容会伴随内容一起浮现标题，一般是缺省的， data-container="body" data-toggle="popover" 为固定写法， data-placement="left" 为向左方向展示气泡弹框，可以根据自己需求 改为 bottom 、top、right等不同的方向，data-content="气泡的内容" 就是点击标签后 气泡弹框浮现的文字内容。
接下来就是初始化需要在script标签内加上，不然点击是不会出现效果的。
$(function () {
$("[data-toggle='popover']").popover();
});
现在不出意外的话 点击a标签就已经能够浮现内容了，但是还有个小问题，点击a标签浮现的气泡框，需要再次点击气泡框才会消失，这样比较麻烦，不太符合实际需求,所以需要再加上点击父元素 body时 让已经出现的气泡框隐藏起来，因此再次在上面的基础上添加js代码来解决这种情况
$(function () {
$("[data-toggle='popover']").popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
到这一步 就大功告成了，感兴趣的可以去试一试。
附上最终实现截图：
官方参考用例：
https://www.runoob.com/try/try.php?filename=bootstrap3-plugin-popover