bootstrap的popover.js(弹出框)使用心得

bootstrap的popover.js(弹出框)使用心得

最近在做一个项目,要实现的一个功能是:点击某个元素后,在上面弹出它的文本内容.搜索了一下,感觉用bootstrap的popover的插件应该可以满足我的要求,而且这个项目用的就是bootstrap框架
首先引用bootstrap.css jquery bootstrap.js这三个文件
html 代码

<link rel="stylesheet" href="dist/css/bootstrap.css">
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>

html内容为
html 代码

    <span class="show">第11111111行</span>
    <span class="show">第2行</span>
    <span class="show">第333行</span>
    <span class="show">第44444行</span>
    <span class="show">第55555行</span>

js调用
javascript 代码

// 初始化内容及出现的方式

$(".show").each(function(){
    var txt=$(this).html()
    $(this).popover({
        trigger:"click",
        content:txt,
        placement:"top",
    })
}).on("click",function(){
    $(".popover").hide();//隐藏popover
    $(this).popover("show");
})

即可满足要求.

当需要实现功能不是点击,而是鼠标悬浮在上面时出现提示,离开时提示小时,则js部分可以简化为
javascript 代码

$(".show").each(function(){
    var txt=$(this).html()
    $(this).popover({
        trigger:"hover",
        content:txt,
        placement:"top",
    })
})