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