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

Fixed #5153 - Tooltip: OutOfBounds alignment does not affect tooltip arrow position

pull/5339/head
tugcekucukoglu 2024-02-23 15:43:44 +03:00
parent 559bf63186
commit 59b510f97b
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/lib/tooltip/Tooltip.js
View File

@ -244,17 +244,11 @@ const Tooltip = BaseTooltip.extend('tooltip', {
getTooltipElement(el) { getTooltipElement(el) {
return document.getElementById(el.$_ptooltipId); return document.getElementById(el.$_ptooltipId);
}, },
create(el, options) { create(el) {
const modifiers = el.$_ptooltipModifiers; const modifiers = el.$_ptooltipModifiers;
const tooltipArrow = DomHandler.createElement('div', { const tooltipArrow = DomHandler.createElement('div', {
class: !this.isUnstyled() && this.cx('arrow'), class: !this.isUnstyled() && this.cx('arrow'),
style: {
top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null,
bottom: modifiers?.top ? '0' : null,
left: modifiers?.right || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '0' : modifiers?.top || modifiers?.bottom ? '50%' : null,
right: modifiers?.left ? '0' : null
},
'p-bind': this.ptm('arrow', { 'p-bind': this.ptm('arrow', {
context: modifiers context: modifiers
}) })
@ -429,6 +423,13 @@ const Tooltip = BaseTooltip.extend('tooltip', {
!this.isUnstyled() && DomHandler.addClass(tooltipElement, `p-tooltip-${position}`); !this.isUnstyled() && DomHandler.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 = DomHandler.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);