From e59b61dc29859e563b283aa0f4d2e35d7155d863 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Fri, 9 Feb 2024 16:29:31 -0600 Subject: [PATCH 1/4] Keep tooltips visible on hover This is to add the ability to interact with the content of a tooltip --- package-lock.json | 4 ++-- src/layers/Tooltip/Tooltip.tsx | 33 +++++++++++++++++++++++++-------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6935f918..1960b8c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reablocks", - "version": "5.8.2", + "version": "5.8.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "reablocks", - "version": "5.8.2", + "version": "5.8.8", "license": "Apache-2.0", "dependencies": { "@marko19907/string-to-color": "^1.0.0", diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index 5345dd6d..a4695c5e 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -1,4 +1,11 @@ -import React, { FC, useState, useRef, useEffect, ReactNode } from 'react'; +import React, { + FC, + useState, + useRef, + useEffect, + ReactNode, + useCallback +} from 'react'; import classNames from 'classnames'; import { Placement, @@ -92,7 +99,7 @@ export interface TooltipProps { followCursor?: boolean; /** - * Add pointer events or not. Usually not for tooltips. + * Add pointer events or not. */ pointerEvents?: string; @@ -152,6 +159,14 @@ export const Tooltip: FC> = ({ } ); + const handleClose = useCallback(() => { + clearTimeout(timeout.current); + timeout.current = setTimeout(() => { + deactivateTooltip(ref.current, isPopover); + onClose?.(); + }, leaveDelay); + }, [deactivateTooltip, isPopover, onClose, leaveDelay]); + useEffect(() => { // componentDidUpdateLogic style logic if (!mounted.current) { @@ -191,6 +206,12 @@ export const Tooltip: FC> = ({ return ( { + clearTimeout(timeout.current); + }} + onMouseLeave={() => { + handleClose(); + }} className={classNames(css.tooltip, className)} initial={{ opacity: 0, @@ -218,8 +239,8 @@ export const Tooltip: FC> = ({ ); }} onOpen={() => { + clearTimeout(timeout.current); if (!internalVisible) { - clearTimeout(timeout.current); timeout.current = setTimeout(() => { if (!disabled) { deactivateAllTooltips(isPopover); @@ -235,11 +256,7 @@ export const Tooltip: FC> = ({ e?.nativeEvent?.type !== 'click' || (e?.nativeEvent?.type === 'click' && closeOnClick) ) { - clearTimeout(timeout.current); - timeout.current = setTimeout(() => { - deactivateTooltip(ref.current, isPopover); - onClose?.(); - }, leaveDelay); + handleClose(); } }} > From fa6eb3fa3d64ea4d9b18ae168c49745f49d5260e Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Fri, 9 Feb 2024 16:45:54 -0600 Subject: [PATCH 2/4] Don't trigger tooltip mouse over events for popovers --- src/layers/Tooltip/Tooltip.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index a4695c5e..a83e50f7 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -207,10 +207,14 @@ export const Tooltip: FC> = ({ return ( { - clearTimeout(timeout.current); + if (!isPopover) { + clearTimeout(timeout.current); + } }} onMouseLeave={() => { - handleClose(); + if (!isPopover) { + handleClose(); + } }} className={classNames(css.tooltip, className)} initial={{ From a7f8fc62a563d2b243a2173067d40fdb81e59629 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 12 Feb 2024 09:13:46 -0600 Subject: [PATCH 3/4] Add interactive hover to Popover --- src/layers/Tooltip/Tooltip.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index a83e50f7..ae9c1d53 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -99,7 +99,7 @@ export interface TooltipProps { followCursor?: boolean; /** - * Add pointer events or not. + * Add pointer events or not. Usually not for tooltips. */ pointerEvents?: string; @@ -207,12 +207,13 @@ export const Tooltip: FC> = ({ return ( { - if (!isPopover) { + // keep popover open when interacting with it + if (isPopover && trigger === 'hover') { clearTimeout(timeout.current); } }} onMouseLeave={() => { - if (!isPopover) { + if (isPopover && trigger === 'hover') { handleClose(); } }} From 419d99a69489de705a9c75f2ea3df7617e32e218 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 12 Feb 2024 09:19:29 -0600 Subject: [PATCH 4/4] Add support for trigger array --- src/layers/Tooltip/Tooltip.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index ae9c1d53..dde2a787 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -208,12 +208,20 @@ export const Tooltip: FC> = ({ { // keep popover open when interacting with it - if (isPopover && trigger === 'hover') { + if ( + isPopover && + (trigger === 'hover' || + (Array.isArray(trigger) && trigger.includes('hover'))) + ) { clearTimeout(timeout.current); } }} onMouseLeave={() => { - if (isPopover && trigger === 'hover') { + if ( + isPopover && + (trigger === 'hover' || + (Array.isArray(trigger) && trigger.includes('hover'))) + ) { handleClose(); } }}