From 9cbbb79f9c55ed0a3a784037d1d9c8fc629e823e Mon Sep 17 00:00:00 2001 From: Furkan Sezis Date: Sun, 9 Apr 2023 18:11:41 +0300 Subject: [PATCH 1/5] tooltip.d.ts updated --- components/lib/tooltip/Tooltip.d.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts index caa5f2a18..b51f73f70 100755 --- a/components/lib/tooltip/Tooltip.d.ts +++ b/components/lib/tooltip/Tooltip.d.ts @@ -40,6 +40,16 @@ export interface TooltipOptions { * @defaultValue true */ fitContent?: boolean | undefined; + /** + * When present, it adds a custom delay to the tooltip's display. + * @defaultValue 0 + */ + showDelay?: number | undefined; + /** + * When present, it adds a custom delay to the tooltip's hiding. + * @defaultValue 0 + */ + hideDelay?: number | undefined; } /** From 70af953e9d42965767610edbb0f75bf83d10f070 Mon Sep 17 00:00:00 2001 From: Furkan Sezis Date: Sun, 9 Apr 2023 18:11:56 +0300 Subject: [PATCH 2/5] tooltip.js updated --- components/lib/tooltip/Tooltip.js | 88 ++++++++++++++++++++++--------- 1 file changed, 63 insertions(+), 25 deletions(-) diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 8824b8971..418b02cd9 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -47,54 +47,90 @@ function unbindScrollListener(el) { } function onMouseEnter(event) { - show(event.currentTarget); + const el = event.currentTarget; + const showDelay = el.$_ptooltipShowDelay; + + show(event.currentTarget, showDelay); } function onMouseLeave(event) { - hide(event.currentTarget); + const el = event.currentTarget; + const hideDelay = el.$_ptooltipHideDelay; + + hide(event.currentTarget, hideDelay); } function onFocus(event) { - show(event.currentTarget); + const el = event.currentTarget; + const showDelay = el.$_ptooltipShowDelay; + + console.log('focus', showDelay); + show(event.currentTarget, showDelay); } function onBlur(event) { - hide(event.currentTarget); + const el = event.currentTarget; + const hideDelay = el.$_ptooltipHideDelay; + + hide(event.currentTarget, hideDelay); } function onClick(event) { - hide(event.currentTarget); + const el = event.currentTarget; + const hideDelay = el.$_ptooltipHideDelay; + + hide(event.currentTarget, hideDelay); } function onKeydown(event) { - event.code === 'Escape' && hide(event.currentTarget); + event.code === 'Escape' && hide(event.currentTarget, hideDelay); } -function show(el) { - if (el.$_ptooltipDisabled) { - return; - } +let timer; - let tooltipElement = create(el); - - align(el); - DomHandler.fadeIn(tooltipElement, 250); - - window.addEventListener('resize', function onWindowResize() { - if (!DomHandler.isTouchDevice()) { - hide(el); +function show(el, showDelay) { + function tooltipActions() { + if (el.$_ptooltipDisabled) { + return; } - this.removeEventListener('resize', onWindowResize); - }); + let tooltipElement = create(el); - bindScrollListener(el); - ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); + align(el); + DomHandler.fadeIn(tooltipElement, 250); + + window.addEventListener('resize', function onWindowResize() { + if (!DomHandler.isTouchDevice()) { + hide(el); + } + + this.removeEventListener('resize', onWindowResize); + }); + + bindScrollListener(el); + ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); + } + + if (showDelay !== undefined) { + timer = setTimeout(tooltipActions, showDelay); + } else { + tooltipActions(); + } } -function hide(el) { - remove(el); - unbindScrollListener(el); +function hide(el, hideDelay) { + function tooltipRemoval() { + remove(el); + unbindScrollListener(el); + } + + clearTimeout(timer); + + if (hideDelay !== undefined) { + setTimeout(tooltipRemoval, hideDelay); + } else { + tooltipRemoval(); + } } function getTooltipElement(el) { @@ -332,6 +368,8 @@ const Tooltip = { target.$_ptooltipClass = options.value.class; target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true; target.$_ptooltipIdAttr = options.value.id || ''; + target.$_ptooltipShowDelay = options.value.showDelay || 0; + target.$_ptooltipHideDelay = options.value.hideDelay || 0; } } From f3855852b08374f3bec4b92424e789dbccb90339 Mon Sep 17 00:00:00 2001 From: Furkan Sezis Date: Sun, 9 Apr 2023 18:12:17 +0300 Subject: [PATCH 3/5] DelayDoc added --- doc/tooltip/DelayDoc.vue | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 doc/tooltip/DelayDoc.vue diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue new file mode 100644 index 000000000..e9923ee79 --- /dev/null +++ b/doc/tooltip/DelayDoc.vue @@ -0,0 +1,34 @@ + + + From c3cd42a3173ed2b28ea6cd5c355bca79cfcf11d6 Mon Sep 17 00:00:00 2001 From: Furkan Sezis Date: Sun, 9 Apr 2023 18:12:31 +0300 Subject: [PATCH 4/5] index.cue updated --- pages/tooltip/index.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue index 98c0653ef..36e475af5 100755 --- a/pages/tooltip/index.vue +++ b/pages/tooltip/index.vue @@ -9,6 +9,7 @@ import ImportDoc from '@/doc/tooltip/ImportDoc'; import PositionDoc from '@/doc/tooltip/PositionDoc'; import StyleDoc from '@/doc/tooltip/StyleDoc'; import TemplateDoc from '@/doc/tooltip/TemplateDoc'; +import DelayDoc from '@/doc/tooltip/DelayDoc'; export default { data() { @@ -34,6 +35,11 @@ export default { label: 'Template', component: TemplateDoc }, + { + id: 'delay', + label: 'Delay', + component: DelayDoc + }, { id: 'style', label: 'Style', From bcac4b7776c08ad1b7cb92132bd35f6c2a203859 Mon Sep 17 00:00:00 2001 From: Furkan Sezis Date: Mon, 10 Apr 2023 11:01:28 +0300 Subject: [PATCH 5/5] tooltip.js updated --- components/lib/tooltip/Tooltip.js | 64 +++++++++++++++---------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 418b02cd9..0c1559590 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -1,5 +1,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils'; +let timer; + function bindEvents(el) { const modifiers = el.$_ptooltipModifiers; @@ -86,50 +88,48 @@ function onKeydown(event) { event.code === 'Escape' && hide(event.currentTarget, hideDelay); } -let timer; - -function show(el, showDelay) { - function tooltipActions() { - if (el.$_ptooltipDisabled) { - return; - } - - let tooltipElement = create(el); - - align(el); - DomHandler.fadeIn(tooltipElement, 250); - - window.addEventListener('resize', function onWindowResize() { - if (!DomHandler.isTouchDevice()) { - hide(el); - } - - this.removeEventListener('resize', onWindowResize); - }); - - bindScrollListener(el); - ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); +function tooltipActions(el) { + if (el.$_ptooltipDisabled) { + return; } + let tooltipElement = create(el); + + align(el); + DomHandler.fadeIn(tooltipElement, 250); + + window.addEventListener('resize', function onWindowResize() { + if (!DomHandler.isTouchDevice()) { + hide(el); + } + + this.removeEventListener('resize', onWindowResize); + }); + + bindScrollListener(el); + ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); +} + +function show(el, showDelay) { if (showDelay !== undefined) { - timer = setTimeout(tooltipActions, showDelay); + timer = setTimeout(() => tooltipActions(el), showDelay); } else { - tooltipActions(); + tooltipActions(el); } } -function hide(el, hideDelay) { - function tooltipRemoval() { - remove(el); - unbindScrollListener(el); - } +function tooltipRemoval(el) { + remove(el); + unbindScrollListener(el); +} +function hide(el, hideDelay) { clearTimeout(timer); if (hideDelay !== undefined) { - setTimeout(tooltipRemoval, hideDelay); + setTimeout(() => tooltipRemoval(el), hideDelay); } else { - tooltipRemoval(); + tooltipRemoval(el); } }