feat: clickable prop

Author: gabrieljablonski

src/App.tsx

@@ -17,7 +17,9 @@ function WithProviderMinimal() {
           <button>Minimal 2</button>
         </TooltipWrapper>
       </p>
-      <Tooltip />
+      <Tooltip clickable>
+        <button>button</button>
+      </Tooltip>
     </section>
   )
 }
@@ -159,6 +161,7 @@ function App() {
             content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
             events={['click']}
             position={position}
+            positionStrategy="fixed"
           />
         </div>
       </div>

src/components/Tooltip/Tooltip.tsx

@@ -23,7 +23,8 @@ const Tooltip = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
-  noArrow,
+  noArrow = false,
+  clickable = false,
   style: externalStyles,
   position,
   // props handled by controller
@@ -43,6 +44,7 @@ const Tooltip = ({
   const lastFloatPosition = useRef<IPosition | null>(null)
   const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
+  const hoveringTooltip = useRef(false)
 
   const handleShow = (value: boolean) => {
     if (setIsOpen) {
@@ -62,14 +64,17 @@ const Tooltip = ({
     }, delayShow)
   }
 
-  const handleHideTooltipDelayed = () => {
+  const handleHideTooltipDelayed = (delay = delayHide) => {
     if (tooltipHideDelayTimerRef.current) {
       clearTimeout(tooltipHideDelayTimerRef.current)
     }
 
     tooltipHideDelayTimerRef.current = setTimeout(() => {
+      if (hoveringTooltip.current) {
+        return
+      }
       handleShow(false)
-    }, delayHide)
+    }, delay)
   }
 
   const handleShowTooltip = (event?: Event) => {
@@ -93,7 +98,10 @@ const Tooltip = ({
   }
 
   const handleHideTooltip = () => {
-    if (delayHide) {
+    if (clickable) {
+      // allow time for the mouse to reach the tooltip, in case there's a gap
+      handleHideTooltipDelayed(delayHide || 50)
+    } else if (delayHide) {
       handleHideTooltipDelayed()
     } else {
       handleShow(false)
@@ -207,6 +215,19 @@ const Tooltip = ({
       }
     }
 
+    const handleMouseEnterTooltip = () => {
+      hoveringTooltip.current = true
+    }
+    const handleMouseLeaveTooltip = () => {
+      hoveringTooltip.current = false
+      handleHideTooltip()
+    }
+
+    if (clickable) {
+      tooltipRef.current?.addEventListener('mouseenter', handleMouseEnterTooltip)
+      tooltipRef.current?.addEventListener('mouseleave', handleMouseLeaveTooltip)
+    }
+
     enabledEvents.forEach(({ event, listener }) => {
       elementRefs.forEach((ref) => {
         ref.current?.addEventListener(event, listener)
@@ -215,6 +236,10 @@ const Tooltip = ({
 
     return () => {
       window.removeEventListener('click', handleClickOutsideAnchor)
+      if (clickable) {
+        tooltipRef.current?.removeEventListener('mouseenter', handleMouseEnterTooltip)
+        tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
+      }
       enabledEvents.forEach(({ event, listener }) => {
         elementRefs.forEach((ref) => {
           ref.current?.removeEventListener(event, listener)
@@ -297,6 +322,7 @@ const Tooltip = ({
       className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
         [styles['show']]: hasContentOrChildren && !calculatingPosition && (isOpen || show),
         [styles['fixed']]: positionStrategy === 'fixed',
+        [styles['clickable']]: clickable,
       })}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}

src/components/Tooltip/TooltipTypes.d.ts

@@ -49,6 +49,7 @@ export interface ITooltip {
   delayHide?: number
   float?: boolean
   noArrow?: boolean
+  clickable?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean

src/components/Tooltip/styles.module.css

@@ -29,6 +29,10 @@
   display: none;
 }
 
+.clickable {
+  pointer-events: auto;
+}
+
 .show {
   visibility: visible;
   opacity: var(--rt-opacity);

src/components/TooltipController/TooltipController.tsx

@@ -29,7 +29,8 @@ const TooltipController = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
-  noArrow,
+  noArrow = false,
+  clickable = false,
   style,
   position,
   isOpen,
@@ -184,6 +185,7 @@ const TooltipController = ({
     delayHide: tooltipDelayHide,
     float: tooltipFloat,
     noArrow,
+    clickable,
     style,
     position,
     isOpen,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -28,6 +28,7 @@ export interface ITooltipController {
   delayHide?: number
   float?: boolean
   noArrow?: boolean
+  clickable?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean