feat: holdPositionOnRender

Author: gabrieljablonski

src/App.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { TooltipController as Tooltip } from 'components/TooltipController'
 import { IPosition } from 'components/Tooltip/TooltipTypes.d'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { inline, offset } from '@floating-ui/dom'
 import styles from './styles.module.css'
 
@@ -23,6 +23,26 @@ function App() {
     setAnchorId(target.id)
   }
 
+  const [which, setWhich] = useState<'1' | '2'>('1')
+  const [show, setShow] = useState(true)
+
+  const button1 = useMemo(
+    () => (
+      <button data-tooltip-id="hold" data-tooltip-content="button 1" className="anchor-button">
+        button 1
+      </button>
+    ),
+    [],
+  )
+  const button2 = useMemo(
+    () => (
+      <button data-tooltip-id="hold" data-tooltip-content="button 2" className="anchor-button">
+        button 2
+      </button>
+    ),
+    [],
+  )
+
   return (
     <main className={styles['main']}>
       <button
@@ -93,6 +113,25 @@ function App() {
           Tooltip content
         </Tooltip>
       </section>
+      <section style={{ marginTop: '100px', marginBottom: '100px' }}>
+        <div style={{ height: '21px' }}>
+          {show && <div>{which === '1' ? button1 : button2}</div>}
+        </div>
+        <Tooltip id="hold" isOpen holdPositionOnRender>
+          Hello world!
+        </Tooltip>
+        <button
+          onClick={() => {
+            setShow(false)
+            setTimeout(() => {
+              setShow(true)
+            }, 1000)
+            setWhich((w) => (w === '2' ? '1' : '2'))
+          }}
+        >
+          switch
+        </button>
+      </section>
       <div style={{ display: 'flex', gap: '12px', flexDirection: 'row' }}>
         <div>
           <div

src/components/Tooltip/Tooltip.tsx

@@ -42,6 +42,7 @@ const Tooltip = ({
   content,
   contentWrapperRef,
   isOpen,
+  holdPositionOnRender,
   setIsOpen,
   activeAnchor,
   setActiveAnchor,
@@ -379,7 +380,7 @@ const Tooltip = ({
     let updateTooltipCleanup: null | (() => void) = null
     if (closeOnResize) {
       window.addEventListener('resize', handleScrollResize)
-    } else if (activeAnchor && tooltipRef.current) {
+    } else if (activeAnchor && tooltipRef.current && !holdPositionOnRender) {
       updateTooltipCleanup = autoUpdate(
         activeAnchor as HTMLElement,
         tooltipRef.current as HTMLElement,
@@ -639,7 +640,7 @@ const Tooltip = ({
 
   const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0
 
-  return rendered ? (
+  return rendered || (wasShowing.current && holdPositionOnRender) ? (
     <WrapperElement
       id={id}
       role="tooltip"

src/components/Tooltip/TooltipTypes.d.ts

@@ -84,6 +84,7 @@ export interface ITooltip {
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean
+  holdPositionOnRender?: boolean
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void

src/components/TooltipController/TooltipController.tsx

@@ -45,6 +45,7 @@ const TooltipController = ({
   position,
   isOpen,
   disableStyleInjection = false,
+  holdPositionOnRender,
   border,
   opacity,
   arrowColor,
@@ -333,6 +334,7 @@ const TooltipController = ({
     style,
     position,
     isOpen,
+    holdPositionOnRender,
     border,
     opacity,
     arrowColor,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -61,6 +61,7 @@ export interface ITooltipController {
   position?: IPosition
   isOpen?: boolean
   disableStyleInjection?: boolean | 'core'
+  holdPositionOnRender?: boolean
   /**
    * @description see https://developer.mozilla.org/en-US/docs/Web/CSS/border.
    *