Added floating UI example

package.json

@@ -4,6 +4,7 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
+    "@floating-ui/react": "^0.24.3",
     "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/Content.js

@@ -1,15 +1,23 @@
+import './Pops.css';
+
 import { useMemo, useState, useRef, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { createPopId, paragraphs } from './util';
 import Popover from './Popover';
 import Popper from './Popper';
-
-import './Pops.css';
+import FloatingUi from './FloatingUi';
 
 const MODES = {
   POPOVER: 'POPOVER',
   POPPER: 'POPPER',
+  FLOATING_UI: 'FLOATING_UI'
+}
+
+const COMPONENT = {
+  [MODES.POPOVER]: Popover,
+  [MODES.POPPER]: Popper,
+  [MODES.FLOATING_UI]: FloatingUi
 }
 
 function Content() {
@@ -29,7 +37,7 @@ function Content() {
       var output = cur;
 
       if (i % 5 === 0) {
-        const Component = mode === MODES.POPOVER ? Popover : Popper;
+        const Component = COMPONENT[mode];
         const id = createPopId(cur, pi, i)
         output = <Component key={id} text={cur} id={id} />
       }
@@ -84,6 +92,17 @@ function Content() {
             data-checked={mode === MODES.POPPER}
           />
         </label>
+        <label>
+          Floating UI
+          <input
+            onChange={handleModeToggle}
+            type='radio'
+            name='mode'
+            value={MODES.FLOATING_UI}
+            checked={mode === MODES.FLOATING_UI}
+            data-checked={mode === MODES.FLOATING_UI}
+          />
+        </label>
 
         <label>popover::backdrop
           <input

src/FloatingUi.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useFloating, autoUpdate, flip } from '@floating-ui/react';
+
+function FloatingUi({ text, id }) {
+  const {refs, floatingStyles} = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: 'top',
+    strategy: 'absolute',
+    middleware: [flip()]
+  });
+
+  useEffect(() => {
+
+    return () => {
+
+    }
+  }, [id])
+
+  return (
+    <>
+      <button id={`button-${id}`} ref={refs.setReference}>
+        {text}
+      </button>
+
+      <span
+        ref={refs.setFloating}
+        id={`tooltip-${id}`}
+        className='floating-ui-tooltip'
+        style={floatingStyles}
+      >
+        <small>{text} floating</small>
+        <button className='close-button'>
+          <span aria-hidden="true">❌</span>
+          <span className="sr-only">Close</span>
+        </button>
+      </span>
+    </>
+  )
+}
+
+export default FloatingUi;

src/Pops.css

@@ -20,7 +20,7 @@ button:active {
   border-radius: 10px;
 }
 
-[popover], .popper-tooltip {
+[popover], .popper-tooltip, .floating-ui-tooltip {
   border: 3px solid teal;
   border-radius: 10px;
   padding: 0.25rem;