关于boostrap插件popover的使用

最新推荐文章于 2025-08-07 17:00:33 发布

weixin_30519071

最新推荐文章于 2025-08-07 17:00:33 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/daidao/p/7010561.html

本文介绍如何使用Popover组件展示复杂的HTML内容，通过示例代码详细解释了Popover的配置选项及其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用于悬停显示，类似于tooltip，但能显示更丰富的文本内容。

$('#temp').popover(
    {
      trigger:'click', //触发方式
      template: '', //你自定义的模板
      title:"标题",//设置 弹出框 的标题
      html: true, // 为true的话，data-content里就能放html代码了
      content:"",//这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
   }
 );

例子（悬停显示部分网页内容）：

html部分

<div id="hoverModal" class="form-body" style="display: none;">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label class="control-label">项目工日</label>
                <div class="controls">
                    <div style="padding: 8px 0 0 5px" id="hover-projectWorkingDay"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label class="control-label">出差工日</label>
                <div class="controls">
                    <div style="padding: 8px 0 0 5px" id="hover-businessTripWorkingDay"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label class="control-label">加班工日</label>
                <div class="controls">
                    <div style="padding: 8px 0 0 5px" id="hover-workOvertimeWorkingDay"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label class="control-label">请假工日</label>
                <div class="controls">
                    <div style="padding: 8px 0 0 5px" id="hover-leaveWorkingDay"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <label class="control-label">内容</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div style="padding: 8px 0 0 5px" id="hover-content"></div>
            </div>
        </div>
    </div>
</div>

js部分

$.ajax({

    type: 'get',
    url: WEB_ROOT + '/admin/Journal/personal-journal/pj-edit',
    dataType: "json",
    data: {
        id: id
    },
    success: function (data) {
        $("#hover-projectWorkingDay").text(data.pwd);
        $("#hover-businessTripWorkingDay").text(data.btwd);
        $("#hover-workOvertimeWorkingDay").text(data.wowd);
        $("#hover-leaveWorkingDay").text(data.lwd);
        $("#hover-content").html(data.c);
        var hoverModalHtml = $("#hoverModal").html();
$('[data-toggle="popover"]').each(function () {
            var element = $(this);
            var id = element.attr('id');
            var txt = element.html();
            element.popover({
                trigger: 'manual',
                placement: 'bottom', //top, bottom, left or right
                title: txt,
                html: 'true',
                content: hoverModalHtml,
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    $(_this).popover('hide');
                });
                $(".popover").css("left","-360px").css("overflow","scroll");
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });
    },
    error: function () {
        Global.notify("error", "数据加载处理失败,请尝试刷新或联系管理员!");
    }
});


相关链接：http://www.tuicool.com/articles/IzQJziN

转载于:https://www.cnblogs.com/daidao/p/7010561.html