vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

enhance edge detection for tooltips

pull/7072/head
Iessa Pragg 2025-01-10 19:20:36 +13:00
parent 81a5df370b
commit 7331a90b0a
1 changed files with 55 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/primevue/src/tooltip/Tooltip.js
View File

@ -383,42 +383,97 @@ const Tooltip = BaseTooltip.extend('tooltip', {
alignRight(el) { alignRight(el) {
this.preAlign(el, 'right'); this.preAlign(el, 'right');
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);
let arrowElement = findSingle(tooltipElement, '[data-pc-section="arrow"]');
let hostOffset = this.getHostOffset(el); let hostOffset = this.getHostOffset(el);
let left = hostOffset.left + getOuterWidth(el); let left = hostOffset.left + getOuterWidth(el);
let top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(tooltipElement)) / 2; let top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(tooltipElement)) / 2;
tooltipElement.style.left = left + 'px'; tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px'; tooltipElement.style.top = top + 'px';
arrowElement.style.top = '50%';
arrowElement.style.right = null;
arrowElement.style.bottom = null;
arrowElement.style.left = '0';
}, },
alignLeft(el) { alignLeft(el) {
this.preAlign(el, 'left'); this.preAlign(el, 'left');
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);
let arrowElement = findSingle(tooltipElement, '[data-pc-section="arrow"]');
let hostOffset = this.getHostOffset(el); let hostOffset = this.getHostOffset(el);
let left = hostOffset.left - getOuterWidth(tooltipElement); let left = hostOffset.left - getOuterWidth(tooltipElement);
let top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(tooltipElement)) / 2; let top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(tooltipElement)) / 2;
tooltipElement.style.left = left + 'px'; tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px'; tooltipElement.style.top = top + 'px';
arrowElement.style.top = '50%';
arrowElement.style.right = '0';
arrowElement.style.bottom = null;
arrowElement.style.left = null;
}, },
alignTop(el) { alignTop(el) {
this.preAlign(el, 'top'); this.preAlign(el, 'top');
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);
let arrowElement = findSingle(tooltipElement, '[data-pc-section="arrow"]');
let tooltipWidth = getOuterWidth(tooltipElement);
let elementWidth = getOuterWidth(el);
let { width: viewportWidth } = getViewport();
let hostOffset = this.getHostOffset(el); let hostOffset = this.getHostOffset(el);
let left = hostOffset.left + (getOuterWidth(el) - getOuterWidth(tooltipElement)) / 2; let left = hostOffset.left + (getOuterWidth(el) - getOuterWidth(tooltipElement)) / 2;
let top = hostOffset.top - getOuterHeight(tooltipElement); let top = hostOffset.top - getOuterHeight(tooltipElement);
if (hostOffset.left < tooltipWidth) {
left = hostOffset.left;
}
if (hostOffset.left + tooltipWidth > viewportWidth) {
// accounting for a scrollbar being present, getViewport() width includes scrollbars
left = Math.floor(hostOffset.left + elementWidth - tooltipWidth);
}
tooltipElement.style.left = left + 'px'; tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px'; tooltipElement.style.top = top + 'px';
// The center of the target relative to the tooltip
let elementRelativeCenter = Math.abs(this.getHostOffset(tooltipElement).left - hostOffset.left) + elementWidth / 2;
arrowElement.style.top = null;
arrowElement.style.right = null;
arrowElement.style.bottom = '0';
arrowElement.style.left = elementRelativeCenter + 'px';
}, },
alignBottom(el) { alignBottom(el) {
this.preAlign(el, 'bottom'); this.preAlign(el, 'bottom');
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);
let arrowElement = findSingle(tooltipElement, '[data-pc-section="arrow"]');
let tooltipWidth = getOuterWidth(tooltipElement);
let elementWidth = getOuterWidth(el);
let { width: viewportWidth } = getViewport();
let hostOffset = this.getHostOffset(el); let hostOffset = this.getHostOffset(el);
let left = hostOffset.left + (getOuterWidth(el) - getOuterWidth(tooltipElement)) / 2; let left = hostOffset.left + (getOuterWidth(el) - getOuterWidth(tooltipElement)) / 2;
let top = hostOffset.top + getOuterHeight(el); let top = hostOffset.top + getOuterHeight(el);
if (hostOffset.left < tooltipWidth) {
left = hostOffset.left;
}
if (hostOffset.left + tooltipWidth > viewportWidth) {
// accounting for a scrollbar being present, getViewport() width includes scrollbars
left = Math.floor(hostOffset.left + elementWidth - tooltipWidth);
}
tooltipElement.style.left = left + 'px'; tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px'; tooltipElement.style.top = top + 'px';
// The center of the target relative to the tooltip
let elementRelativeCenter = Math.abs(this.getHostOffset(tooltipElement).left - hostOffset.left) + elementWidth / 2;
arrowElement.style.top = '0';
arrowElement.style.right = null;
arrowElement.style.bottom = null;
arrowElement.style.left = elementRelativeCenter + 'px';
}, },
preAlign(el, position) { preAlign(el, position) {
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);
@ -429,13 +484,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
!this.isUnstyled() && addClass(tooltipElement, `p-tooltip-${position}`); !this.isUnstyled() && addClass(tooltipElement, `p-tooltip-${position}`);
tooltipElement.$_ptooltipPosition = position; tooltipElement.$_ptooltipPosition = position;
tooltipElement.setAttribute('data-p-position', position); tooltipElement.setAttribute('data-p-position', position);
let arrowElement = findSingle(tooltipElement, '[data-pc-section="arrow"]');
arrowElement.style.top = position === 'bottom' ? '0' : position === 'right' || position === 'left' || (position !== 'right' && position !== 'left' && position !== 'top' && position !== 'bottom') ? '50%' : null;
arrowElement.style.bottom = position === 'top' ? '0' : null;
arrowElement.style.left = position === 'right' || (position !== 'right' && position !== 'left' && position !== 'top' && position !== 'bottom') ? '0' : position === 'top' || position === 'bottom' ? '50%' : null;
arrowElement.style.right = position === 'left' ? '0' : null;
}, },
isOutOfBounds(el) { isOutOfBounds(el) {
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);