function tooltipELementMaker(container) {
var f = avalon.parseHTML(vmodel.template);
var tooltipElem = f.childNodes[0];
container = (avalon.isFunction(container) ? container() : container) || document.body;
container.appendChild(f);
return tooltipElem;
}
avalon.nextTick(function () {
showElement(tooltipElem);
// 定位toolp元素
tipElem.position({
of: elem,
at: tipElemAt,
my: tipElemMy,
collision: vmodel.collision,
within: (avalon.isFunction(container) ? container() : container) || document.body
});
avalon(tooltipElem).removeClass('oni-tooltip-hidden');
var tipPos = tipElem.offset(), elemPos = atEle.offset();
// position组件自动调整的时候调整箭头上下朝向
if (elem.nodeName) {
if (tipPos.top > atEle.offset().top + elem.offsetHeight && vmodel.arrClass == 'bottom') {
vmodel.arrClass = 'top';
tipElem.removeClass('oni-tooltip-bottom').addClass('oni-tooltip-top');
} else if (tipPos.top + tooltipElem.offsetHeight < atEle.offset().top && vmodel.arrClass == 'top') {
vmodel.arrClass = 'bottom';
tipElem.removeClass('oni-tooltip-top').addClass('oni-tooltip-bottom');
}
// 根据元素和tooltip元素的宽高调整箭头位置
if (arrOut && arrIn) {
var dir = vmodel.arrClass == 'bottom' || vmodel.arrClass == 'left', avalonElem = avalon(elem), moveToLeft = tipPos.left + tooltipElem.offsetWidth / 2 > avalonElem.offset().left + elem.offsetWidth, moveToRight = tipPos.left + tooltipElem.offsetWidth / 2 < avalonElem.offset().left;
// tip元素中线偏出elem
if ((vmodel.arrClass == 'top' || vmodel.arrClass == 'bottom') && (moveToRight || moveToLeft)) {
arrOut.position({
of: tooltipElem,
at: (moveToRight ? 'right' : 'left') + ' ' + (dir ? 'bottom' : 'top'),
my: (moveToRight ? 'right-10' : 'left+10') + ' ' + (dir ? 'top' : 'bottom'),
within: tooltipElem
});
arrIn.position({
of: tooltipElem,
at: (moveToRight ? 'right' : 'left') + ' ' + (dir ? 'bottom' : 'top'),
my: (moveToRight ? 'right-11' : 'left+11') + ' ' + (dir ? 'top-' : 'bottom+') + lessH / 2,
within: tooltipElem
}) // 竖直方向，高度不够
;
} else if ((vmodel.arrClass == 'bottom' || vmodel.arrClass == 'top') && tooltipElem.offsetWidth < elem.offsetWidth) {
arrOut.position({
of: tooltipElem,
at: 'center ' + (dir ? 'bottom' : 'top'),
my: 'center ' + (dir ? 'top' : 'bottom'),
within: tooltipElem
});
arrIn.position({
of: tooltipElem,
at: 'center ' + (dir ? 'bottom' : 'top'),
my: 'center ' + (dir ? 'top-' : 'bottom+') + lessH,
within: tooltipElem
}) // 水平方向，宽度不够
;
} else if ((vmodel.arrClass == 'left' || vmodel.arrClass == 'right') && tooltipElem.offsetHeight < elem.offsetHeight) {
arrOut.position({
of: tooltipElem,
at: (dir ? 'left' : 'right') + ' center',
my: (dir ? 'right' : 'left') + ' center',
within: tooltipElem
});
arrIn.position({
of: tooltipElem,
at: (dir ? 'left' : 'right') + ' center',
my: (dir ? 'right+' : 'left-') + lessW + ' center',
within: tooltipElem
});
} else {
// vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
var elemH = elem.offsetHeight, elemW = elem.offsetWidth, oleft;
switch (vmodel.arrClass) {
case 'left':
case 'right':
if (vmodel.arrClass == 'left') {
arrOut[0].style.left = '-6px';
arrIn[0].style.left = '-5px';
} else {
arrOut[0].style.right = '-5px';
arrIn[0].style.right = '-4px';
}
oleft = Math.floor(elemH / 2) - tipPos.top + elemPos.top;
arrOut[0].style.top = oleft + 'px';
arrIn[0].style.top = oleft + 1 + 'px';
break;
case 'top':
case 'bottom':
default:
if (vmodel.arrClass == 'top') {
arrOut[0].style.top = '-6px';
arrIn[0].style.top = '-5px';
} else {
arrOut[0].style.top = arrIn[0].style.top = 'auto';
arrOut[0].style.bottom = '-6px';
arrIn[0].style.bottom = '-5px';
}
oleft = Math.floor(elemW / 2) - tipPos.left + elemPos.left;
arrOut[0].style.left = oleft + 'px';
arrIn[0].style.left = oleft + 1 + 'px';
}
}
}
}
// IE里面透明箭头显示有问题，屏蔽掉
if (vmodel.animated && !!-[1]) {
clearInterval(animateTimer);
var now = avalon(tooltipElem).css('opacity') * 100 >> 0;
if (now != 100) {
var dis = vmodel._animateArrMaker(now, 100);
dis.splice(0, 1);
animateTimer = setInterval(function () {
if (dis.length <= 0) {
return clearInterval(animateTimer);
}
avalon(tooltipElem).css('opacity', dis[0] / 100);
dis.splice(0, 1);
}, 16);
}
}
});