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

使用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不能完全显示的问题了，请看如下效果图：