bootstrap tooltip被挡住一部分,该如何正常显示

在使用Bootstrap Tooltip展示弹窗验证信息时,遇到Tooltip被遮挡的问题。解决方案是将Tooltip转化为父窗口的一部分,通过在Tooltip显示后创建其复制品,并调整ID和坐标,确保复制品与原Tooltip完全重合,从而解决显示不全的问题。此方法在实践中的效果良好。

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

使用bootstrap 的tooltip显示验证信息的时候,如果是在一个弹出窗进行验证,可能会出现下面的尴尬...


圈圈里面的tooltip被挡住了一部分,该怎么办?

原因就是因为这个tooltip是属于弹出窗的一部分,它的显示会受到弹出窗自身环境的影响,

那么,假如我们把这个tooltip弄成是父窗体的一个控件,这样是不是就可以解决呢?请看如下代码:

showErrors: function (errors) {
    if (errors) {
        // add items to error list and map
        $.extend(this.errorMap, errors);
        this.errorList = [];
        for (var name in errors) {
            this.errorList.push({
                message: errors[name],
                element: this.findByName(name)[0]
            });
        }
        // remove items from success list
        this.successList = $.grep(this.successList, function (element) {
            return !(element.name in errors);
        });
    }

    var tmpElement = null;

    //给showErrors扩展一个显示Tooltip的功能,以下是通过验证所进行的处理
    $.each(this.validElements(), function (index, element) {
        var $element = $(element);

        //是否要针对下拉列表做特殊处理?后续再说...
        //if (element.tagName == "SELECT" && element.selectedOptions.length > 0 && element.selectedOptions[0].val()) {
        //}

        if (element.classList.contains("error")) {
            $element.data("title", "")
                .removeClass("error")
                .tooltip("destroy");
        }
    });
    // Create new tooltips for invalid elements
    $.each(this.errorList, function (index, error) {
        var $element = $(error.element);
        if (tmpElement === null)
            tmpElement = $element;

        $element.tooltip("destroy")
                .data("title", error.message.Message != null ? error.message.Message : error.message)
                .addClass("error")
                .tooltip();

        $element.on('hide.bs.tooltip', function (obj) {
            //这里要把之前在主窗体上添加的相应的tooltip销毁
            if ($(parent.document.body).find("#" + obj.currentTarget.id + "Copy").length > 0) {
                $(parent.document.body).find("#" + obj.currentTarget.id + "Copy").remove();
            }
        })

        $element.on('shown.bs.tooltip', function (obj) {
            //这里要在主窗体上添加相应的tooltip,ID最好是遵循一定的规则,后续销毁的时候就找得到对象
            var newID = obj.currentTarget.id + "Copy";      //这将是后续添加到主窗体的tooltip的ID
            var x = 0;
            var y = 0;
            if ($(parent.document.body).find("[role='dialog']").length > 0) {
                x = $(parent.document.body).find("[role='dialog']")[0].offsetLeft;
                y = $(parent.document.body).find("[role='dialog']")[0].offsetTop;
            }
            var tooltip = obj.currentTarget.nextElementSibling;
            if (tooltip && tooltip.className.indexOf("tooltip") != -1) {    //说明这个控件存在对应的tooltip标签  && tooltip.offsetTop < 0 
                var html = '<div class="tooltip fade top in" role="tooltip" id="' + newID
                    + '" style="top: ' + (y + tooltip.offsetTop + 41)
                    + 'px;left: ' + (x + tooltip.offsetLeft + 1)
                    + 'px; display: block;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">' + tooltip.textContent
                    + '</div></div>';

                $(parent.document.body).append(html);
            }
        })
    });

    if (this.settings.showErrors) {
        this.settings.showErrors.call(this, this.errorMap, this.errorList);
    } else {
        //this.defaultShowErrors();
    }
},
上面这些代码是对jquery.validate.js的showErrors方法的一个扩展,主要做了这么几个事:

1、在tooltip已经显示之后,造一个和它一样的复制品,不同的是,ID要重新赋值、坐标要重新设置,最终使这个复制品能和原来的tooltip完全显示到同一个位置,即叠在一起。

2、在tooltip要隐藏的时候,把之前对它的复制品移除。

那么整个这一过程就可以解决tooltip不能完全显示的问题了,请看如下效果图:


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值