如下圖所示:
由於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;
},
不足之處,歡迎指正