tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tooltip position issue (for tiny space)

Browse Source
This commit is contained in:
Chen Lily 2023-06-05 17:16:12 +08:00
parent 2366b378d2
commit 99d4aa59a8
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/ui/css/tooltip.scss
View File

@ -56,4 +56,8 @@
bottom: unset; bottom: unset;
top: -8px; top: -8px;
} }
&.ui-tooltip-no>.ui-tooltip-pointer {
display: none;
}
} }

42
lib/ui/tooltip.js
View File

@ -75,29 +75,53 @@ function setTooltip(container, content, flag = false, parent = null) {
// check overflow // check overflow
let t = c.offsetTop; let t = c.offsetTop;
let l = c.offsetLeft; let l = c.offsetLeft;
let lastWidth = c.offsetWidth;
p = c.offsetParent; p = c.offsetParent;
let lastWidth = p.clientWidth;
let lastHeight = p.clientHeight;
while (p != null) { while (p != null) {
const overflow = window.getComputedStyle(p).overflow; const overflow = window.getComputedStyle(p).overflow;
if (overflow !== 'visible') { if (overflow !== 'visible') {
t -= p.scrollTop;
l -= p.scrollLeft;
break; break;
} }
t += p.offsetTop; t += p.offsetTop;
l += p.offsetLeft; l += p.offsetLeft;
lastWidth = p.offsetWidth; const w = p.clientWidth;
p = p.offsetParent; if (w < lastWidth) {
lastWidth += l;
} else {
lastWidth = p.clientWidth;
}
const h = p.clientHeight;
if (h < lastHeight) {
lastHeight += t;
} else {
lastHeight = p.clientHeight;
}
const parent = p.offsetParent;
while (p != null && p != parent) {
t -= p.scrollTop;
l -= p.scrollLeft;
p = p.parentElement;
}
} }
const offsetHeight = wrapper.offsetHeight + 14; const offsetHeight = wrapper.offsetHeight;
if (t + top - offsetHeight < 0) { if (t - offsetHeight - 14 < 0) {
top += c.parentElement.offsetHeight + 10; if (t + offsetHeight + 2 > lastHeight) {
wrapper.classList.add('ui-tooltip-down'); top = lastHeight - offsetHeight + 2;
wrapper.classList.add('ui-tooltip-no');
} else {
top += c.parentElement.offsetHeight + 10;
wrapper.classList.add('ui-tooltip-down');
}
} else { } else {
top -= offsetHeight; top -= offsetHeight + 14;
wrapper.classList.remove('ui-tooltip-down'); wrapper.classList.remove('ui-tooltip-down');
} }
const offsetWidth = wrapper.offsetWidth; const offsetWidth = wrapper.offsetWidth;
left += (c.offsetWidth - offsetWidth) / 2; left += (c.offsetWidth - offsetWidth) / 2;
if (left < -l) { if (l - offsetWidth < 0) {
left = 2; left = 2;
} else if (left + offsetWidth + 2 > lastWidth) { } else if (left + offsetWidth + 2 > lastWidth) {
left = lastWidth - offsetWidth - 2; left = lastWidth - offsetWidth - 2;