From cd8597d407ac0374ab11721be0b8b5eeb4e6dff4 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 30 Oct 2023 21:59:44 -0300 Subject: [PATCH 1/3] feat: tooltip closing transition --- src/components/Tooltip/Tooltip.tsx | 46 ++++++------------- src/components/Tooltip/core-styles.module.css | 11 +++-- src/tokens.css | 2 + 3 files changed, 24 insertions(+), 35 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 5413a6525..85653fa44 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -82,24 +82,6 @@ const Tooltip = ({ } }, []) - useEffect(() => { - if (!show) { - /** - * this fixes weird behavior when switching between two anchor elements very quickly - * remove the timeout and switch quickly between two adjancent anchor elements to see it - * - * in practice, this means the tooltip is not immediately removed from the DOM on hide - */ - const timeout = setTimeout(() => { - setRendered(false) - }, 150) - return () => { - clearTimeout(timeout) - } - } - return () => null - }, [show]) - const handleShow = (value: boolean) => { if (!mounted.current) { return @@ -657,13 +639,21 @@ const Tooltip = ({ styles[variant], className, `react-tooltip__place-${actualPlacement}`, - { - 'react-tooltip__show': canShow, - [coreStyles['show']]: canShow, - [coreStyles['fixed']]: positionStrategy === 'fixed', - [coreStyles['clickable']]: clickable, - }, + coreStyles[canShow ? 'show' : 'closing'], + canShow ? 'react-tooltip__show' : 'react-tooltip__closing', + positionStrategy === 'fixed' && coreStyles['fixed'], + clickable && coreStyles['clickable'], )} + onTransitionEnd={(event: TransitionEvent) => { + /** + * @warning if `--rt-transition-closing-delay` is set to 0, + * the tooltip will be stuck (but not visible) on the DOM + */ + if (show || event.propertyName !== 'opacity') { + return + } + setRendered(false) + }} style={{ ...externalStyles, ...inlineStyles, @@ -678,13 +668,7 @@ const Tooltip = ({ coreStyles['arrow'], styles['arrow'], classNameArrow, - { - /** - * changed from dash `no-arrow` to camelcase because of: - * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42 - */ - [coreStyles['noArrow']]: noArrow, - }, + noArrow && coreStyles['noArrow'], )} style={{ ...inlineArrowStyles, diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css index bc317a17b..cbb99823b 100644 --- a/src/components/Tooltip/core-styles.module.css +++ b/src/components/Tooltip/core-styles.module.css @@ -1,12 +1,10 @@ .tooltip { - visibility: hidden; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; - transition: opacity 0.3s ease-out; - will-change: opacity, visibility; + will-change: opacity; } .fixed { @@ -27,8 +25,13 @@ } .show { - visibility: visible; opacity: var(--rt-opacity); + transition: opacity var(--rt-transition-show-delay) ease-out; +} + +.closing { + opacity: 0; + transition: opacity var(--rt-transition-closing-delay) ease-in; } /** end - core styles **/ diff --git a/src/tokens.css b/src/tokens.css index 6d14ee11a..e0c198ffa 100644 --- a/src/tokens.css +++ b/src/tokens.css @@ -6,4 +6,6 @@ --rt-color-warning: #f0ad4e; --rt-color-info: #337ab7; --rt-opacity: 0.9; + --rt-transition-show-delay: 0.15s; + --rt-transition-closing-delay: 0.15s; } From 9ea33632b6bf7eb6450000b30bbc26224ae2f778 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 30 Oct 2023 22:00:00 -0300 Subject: [PATCH 2/3] docs: tooltip closing transition --- docs/docs/examples/styling.mdx | 20 ++++++++++++++++++++ docs/docs/getting-started.mdx | 2 ++ 2 files changed, 22 insertions(+) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index 724e479f2..31d0c10c1 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -372,6 +372,26 @@ In summary, if you do it correctly you can use CSS specificity instead of `!impo ::: +### Customizing opening/closing animation + +By default, the tooltip has a fade-in/fade-out transition when opening/closing, with a delay of 150ms for both. +If you wish to change the delay for any of them, override the following CSS variables: + +:::caution + +Do not set `--rt-transition-closing-delay` to `0`. Doing so will result in the tooltip component being stuck (but not visible) on the DOM. This isn't itself a problem, but may lead to performance issues. + +Set to `1ms` or a similar value instead if you with to disable the fade-out transition when closing. + +::: + +```css +:root { + --rt-transition-show-delay: 0.15s; + --rt-transition-closing-delay: 0.15s; +} +``` + ### Disabling ReactTooltip CSS ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`. diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index 9beb573ff..7bcb7a69c 100644 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -219,5 +219,7 @@ For advanced styling, check [the examples](./examples/styling.mdx). --rt-color-warning: #f0ad4e; --rt-color-info: #337ab7; --rt-opacity: 0.9; + --rt-transition-show-delay: 0.15s; + --rt-transition-closing-delay: 0.15s; } ``` From 4704889a4b6af53099ea227e2ca51efcbd81b59f Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Tue, 31 Oct 2023 00:36:43 -0300 Subject: [PATCH 3/3] docs: typo --- docs/docs/examples/styling.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index 31d0c10c1..b4f1eec7c 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -381,7 +381,7 @@ If you wish to change the delay for any of them, override the following CSS vari Do not set `--rt-transition-closing-delay` to `0`. Doing so will result in the tooltip component being stuck (but not visible) on the DOM. This isn't itself a problem, but may lead to performance issues. -Set to `1ms` or a similar value instead if you with to disable the fade-out transition when closing. +Set to `1ms` or a similar value if you want to disable the fade-out transition when closing. :::