fix: hide tooltip when anchor is removed from DOM

Author: gabrieljablonski

src/App.tsx

@@ -8,19 +8,23 @@ import styles from './styles.module.css'
 import { inline, offset } from './index'
 
 function WithProviderMinimal() {
+  const [hide, setHide] = useState(false)
   return (
     <section style={{ marginTop: '50px' }}>
-      <p>
-        <TooltipWrapper place="bottom" content="Shared Global Tooltip">
-          <button>Minimal 1</button>
-        </TooltipWrapper>
-        <TooltipWrapper place="right" content="Shared Global Tooltip">
-          <button>Minimal 2</button>
-        </TooltipWrapper>
-      </p>
+      {!hide && (
+        <p>
+          <TooltipWrapper place="right" content="Shared Global Tooltip">
+            <button onClick={() => setHide(false)}>Minimal 1</button>
+          </TooltipWrapper>
+          <TooltipWrapper place="bottom" content="Shared Global Tooltip">
+            <button onClick={() => setHide(true)}>Minimal 2</button>
+          </TooltipWrapper>
+        </p>
+      )}
       <Tooltip clickable>
         <button>button</button>
       </Tooltip>
+      <button onClick={() => setHide(false)}>show again</button>
     </section>
   )
 }
@@ -127,26 +131,28 @@ function App() {
         <WithProviderMultiple />
       </TooltipProvider>
       <div style={{ display: 'flex', gap: '12px', flexDirection: 'row' }}>
-        <div>
-          <div
-            id="floatAnchor"
-            className={styles['big-anchor']}
-            onClick={() => {
-              setToggle((t) => !t)
-            }}
-          >
-            Hover me!
+        {!toggle && (
+          <div>
+            <div
+              id="floatAnchor"
+              className={styles['big-anchor']}
+              onClick={() => {
+                setToggle((t) => !t)
+              }}
+            >
+              Hover me!
+            </div>
+            <Tooltip
+              anchorId="floatAnchor"
+              content={
+                toggle
+                  ? 'This is a float tooltip with a very very large content string'
+                  : 'This is a float tooltip'
+              }
+              float
+            />
           </div>
-          <Tooltip
-            anchorId="floatAnchor"
-            content={
-              toggle
-                ? 'This is a float tooltip with a very very large content string'
-                : 'This is a float tooltip'
-            }
-            float
-          />
-        </div>
+        )}
         <div>
           <div
             id="onClickAnchor"