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; } /** diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 8824b8971..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; @@ -47,30 +49,46 @@ 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) { +function tooltipActions(el) { if (el.$_ptooltipDisabled) { return; } @@ -92,11 +110,29 @@ function show(el) { ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex); } -function hide(el) { +function show(el, showDelay) { + if (showDelay !== undefined) { + timer = setTimeout(() => tooltipActions(el), showDelay); + } else { + tooltipActions(el); + } +} + +function tooltipRemoval(el) { remove(el); unbindScrollListener(el); } +function hide(el, hideDelay) { + clearTimeout(timer); + + if (hideDelay !== undefined) { + setTimeout(() => tooltipRemoval(el), hideDelay); + } else { + tooltipRemoval(el); + } +} + function getTooltipElement(el) { return document.getElementById(el.$_ptooltipId); } @@ -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; } } 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 @@ + + + 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',