diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts index 44e75d11e..09666d6bd 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 83bc593c2..4b5ecc4a0 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; } } @@ -55,6 +57,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) { @@ -71,6 +74,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); } @@ -148,8 +152,21 @@ const Tooltip = BaseTooltip.extend('tooltip', { onMouseLeave(event) { const el = event.currentTarget; const hideDelay = el.$_ptooltipHideDelay; + const autoHide = el.$_ptooltipAutoHide; - this.hide(el, hideDelay); + 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; @@ -195,6 +212,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/components/lib/tooltip/style/TooltipStyle.js b/components/lib/tooltip/style/TooltipStyle.js index 93cfaba70..3ca0db2a9 100644 --- a/components/lib/tooltip/style/TooltipStyle.js +++ b/components/lib/tooltip/style/TooltipStyle.js @@ -5,7 +5,6 @@ const css = ` .p-tooltip { position:absolute; display:none; - pointer-events:none; padding: .25em .5rem; max-width: 12.5rem; } diff --git a/doc/tooltip/AutoHideDoc.vue b/doc/tooltip/AutoHideDoc.vue new file mode 100644 index 000000000..f0be0a13a --- /dev/null +++ b/doc/tooltip/AutoHideDoc.vue @@ -0,0 +1,41 @@ + + + diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue index e6b425e2d..5d6a4af31 100755 --- a/pages/tooltip/index.vue +++ b/pages/tooltip/index.vue @@ -4,6 +4,7 @@