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