diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 96fba4c6a1..2a69b8c3a7 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -51151,6 +51151,14 @@ "default": "", "description": "Content to be displayed in tooltip." }, + { + "name": "closeOnEscape", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Specifies if pressing escape key should hide the tooltip." + }, { "name": "disabled", "optional": true, diff --git a/components/lib/hooks/useGlobalOnEscapeKey.js b/components/lib/hooks/useGlobalOnEscapeKey.js index 10b5a44670..a04c7a753d 100644 --- a/components/lib/hooks/useGlobalOnEscapeKey.js +++ b/components/lib/hooks/useGlobalOnEscapeKey.js @@ -14,7 +14,8 @@ export const ESC_KEY_HANDLING_PRIORITIES = { PASSWORD: 700, CASCADE_SELECT: 800, SPLIT_BUTTON: 900, - SPEED_DIAL: 1000 + SPEED_DIAL: 1000, + TOOLTIP: 1200 }; /** diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index d108f6a537..c6c86129bf 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { TooltipBase } from './TooltipBase'; @@ -32,6 +32,13 @@ export const Tooltip = React.memo( const { ptm, cx, sx, isUnstyled } = TooltipBase.setMetaData(metaData); useHandleStyle(TooltipBase.css.styles, isUnstyled, { name: 'tooltip' }); + useGlobalOnEscapeKey({ + callback: () => { + hide(); + }, + when: props.closeOnEscape, + priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, 0] + }); const elementRef = React.useRef(null); const textRef = React.useRef(null); const currentTargetRef = React.useRef(null); diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js index 54e5ae1899..6cc1145a88 100644 --- a/components/lib/tooltip/TooltipBase.js +++ b/components/lib/tooltip/TooltipBase.js @@ -103,6 +103,7 @@ export const TooltipBase = ComponentBase.extend({ autoZIndex: true, baseZIndex: 0, className: null, + closeOnEscape: false, content: null, disabled: false, event: null, diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts index cd2e225912..5306a102dc 100644 --- a/components/lib/tooltip/tooltipoptions.d.ts +++ b/components/lib/tooltip/tooltipoptions.d.ts @@ -58,6 +58,11 @@ export interface TooltipOptions { * Style class of the tooltip. */ className?: string | undefined; + /** + * Specifies if pressing escape key should hide the tooltip. + * @defaultValue false + */ + closeOnEscape?: boolean | undefined; /** * When present, it specifies that the tooltip should be hidden. * @defaultValue false