diff --git a/components/lib/tooltip/BaseTooltip.js b/components/lib/tooltip/BaseTooltip.js index a4a65120c4d..edf44847741 100644 --- a/components/lib/tooltip/BaseTooltip.js +++ b/components/lib/tooltip/BaseTooltip.js @@ -5,7 +5,6 @@ const styles = ` .p-tooltip { position:absolute; display:none; - pointer-events:none; padding: .25em .5rem; max-width: 12.5rem; } diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts index 44e75d11e64..09666d6bd83 100755 --- a/components/lib/tooltip/Tooltip.d.ts +++ b/components/lib/tooltip/Tooltip.d.ts @@ -67,7 +67,12 @@ export interface TooltipOptions { */ hideDelay?: number | undefined; /** - * Used to pass attributes to DOM elements inside the component. + * Whether to hide tooltip when hovering over tooltip content. + * @defaultValue true + */ + autoHide?: boolean | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. * @type {TooltipDirectivePassThroughOptions} */ pt?: PassThrough; diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 31668a6ddc3..2aac7904f33 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -17,6 +17,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { target.$_ptooltipIdAttr = UniqueComponentId() + '_tooltip'; target.$_ptooltipShowDelay = 0; target.$_ptooltipHideDelay = 0; + target.$_ptooltipAutoHide = true; } else if (typeof options.value === 'object' && options.value) { if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return; else { @@ -28,6 +29,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { target.$_ptooltipIdAttr = options.value.id || UniqueComponentId() + '_tooltip'; target.$_ptooltipShowDelay = options.value.showDelay || 0; target.$_ptooltipHideDelay = options.value.hideDelay || 0; + target.$_ptooltipAutoHide = !!options.value.autoHide === options.value.autoHide ? options.value.autoHide : true; } } @@ -56,6 +58,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { target.$_ptooltipIdAttr = target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip'; target.$_ptooltipShowDelay = 0; target.$_ptooltipHideDelay = 0; + target.$_ptooltipAutoHide = true; this.bindEvents(target, options); } else if (typeof options.value === 'object' && options.value) { @@ -72,6 +75,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { target.$_ptooltipIdAttr = options.value.id || target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip'; target.$_ptooltipShowDelay = options.value.showDelay || 0; target.$_ptooltipHideDelay = options.value.hideDelay || 0; + target.$_ptooltipAutoHide = !!options.value.autoHide === options.value.autoHide ? options.value.autoHide : true; this.bindEvents(target, options); } @@ -151,8 +155,21 @@ const Tooltip = BaseTooltip.extend('tooltip', { onMouseLeave(event) { const el = event.currentTarget; const hideDelay = el.$_ptooltipHideDelay; - - this.hide(el, hideDelay); + const autoHide = el.$_ptooltipAutoHide; + + if (!autoHide) { + const valid = + DomHandler.hasClass(event.target, 'p-tooltip') || + DomHandler.hasClass(event.target, 'p-tooltip-arrow') || + DomHandler.hasClass(event.target, 'p-tooltip-text') || + DomHandler.hasClass(event.relatedTarget, 'p-tooltip') || + DomHandler.hasClass(event.relatedTarget, 'p-tooltip-text') || + DomHandler.hasClass(event.relatedTarget, 'p-tooltip-arrow'); + + !valid && this.hide(el, hideDelay); + } else { + this.hide(el, hideDelay); + } }, onFocus(event, options) { const el = event.currentTarget; @@ -198,6 +215,12 @@ const Tooltip = BaseTooltip.extend('tooltip', { window.removeEventListener('resize', onWindowResize); }); + tooltipElement.addEventListener('mouseleave', function onTooltipLeave() { + $this.hide(el); + + tooltipElement.removeEventListener('mouseleave', onTooltipLeave); + }); + this.bindScrollListener(el); ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); }, diff --git a/doc/tooltip/AutoHideDoc.vue b/doc/tooltip/AutoHideDoc.vue new file mode 100644 index 00000000000..d695f945058 --- /dev/null +++ b/doc/tooltip/AutoHideDoc.vue @@ -0,0 +1,38 @@ + + + diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue index c661cb13f9a..408d6f06ef2 100755 --- a/pages/tooltip/index.vue +++ b/pages/tooltip/index.vue @@ -4,6 +4,7 @@