如下图所示:
由于tooltip内容过多,导致内容溢出边界
解决方法:
通过回调函数设置提示框位置
position: function (pos, params, dom, rect, size) {
//父级
var domP = $(dom).parent();
var domC = $(dom).children();
var bottomP = domP.css('bottom');
var rightP = domP.css('right');
var leftP = domP.css('left');
var heightP = domP.height();
var widthP = domP.width();
//子级
var widthC = domC.width();
var heightC = domC.height();
//鼠标悬停位置
var x = pos[0];
var y = pos[1];
var obj = {};
//竖直方向
//如果提示框高度超出边界,则让悬浮窗的top设为当前鼠标位置y
if (parseFloat(heightP) - parseFloat(y) + parseFloat(bottomP) >= heightC) {
obj = {top: pos[1]};
} else {
obj = {top: pos[1] + parseFloat(heightP) - parseFloat(y) + parseFloat(bottomP) - heightC - 40};
}
//水平方向
// 如果提示框高度超出边界,则让悬浮窗的left(right)设为外层边界
if (widthC - widthP > parseFloat(leftP)) {
obj['left'] = 0;
} else if (widthC - widthP < parseFloat(rightP)) {
obj['right'] = 0;
} else {
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = '10%';
}
return obj;
},
不足之处,欢迎指正