diff --git a/src/directives/overflow-tooltip.js b/src/directives/overflow-tooltip.js index ef61b81..931a63f 100644 --- a/src/directives/overflow-tooltip.js +++ b/src/directives/overflow-tooltip.js @@ -38,8 +38,28 @@ const setTooltip = (el, binding) => { el.onmousemove = function(e) { if (!isEllipsis) { return } const vcTooltipDom = document.getElementById('vc-tooltip') - vcTooltipDom.style.top = e.clientY + 15 + 'px' - vcTooltipDom.style.left = e.clientX + 15 + 'px' + const padding = 5 + let offsetX = e.clientX + 15 + let offsetY = e.clientY + 15 + // 判断是否超出视窗边界(横向) + if (e.clientX + vcTooltipDom.offsetWidth > document.documentElement.clientWidth) { + offsetX = document.documentElement.clientWidth - vcTooltipDom.offsetWidth - padding + } + if (document.documentElement.clientWidth - vcTooltipDom.offsetWidth <= 0) { + offsetX = padding + vcTooltipDom.style.width = document.documentElement.clientWidth - padding * 2 + 'px' + } + // 判断是否超出视窗边界(纵向) + if (e.clientY + vcTooltipDom.offsetHeight > document.documentElement.clientHeight) { + offsetY = document.documentElement.clientHeight - vcTooltipDom.offsetHeight - padding + } + if (document.documentElement.clientHeight - vcTooltipDom.offsetHeight <= 0) { + offsetY = padding + vcTooltipDom.style.height = document.documentElement.clientHeight - padding * 2 + 'px' + } + console.log(offsetX, e.clientX, vcTooltipDom.offsetWidth) + vcTooltipDom.style.left = offsetX + 'px' + vcTooltipDom.style.top = offsetY + 'px' } // 鼠标移出时将浮层元素销毁 el.onmouseleave = function() {