Hoverable component: we've come full circle

app/soapbox/components/status_action_bar.js

@@ -663,9 +663,11 @@ class StatusActionBar extends ImmutablePureComponent {
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
         </div>
 
-        <Hoverable
+        <div
           ref={this.setRef}
           className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+        >
+          <Hoverable
             component={(
               <EmojiSelector
                 onReact={this.handleReact}
@@ -687,6 +689,8 @@ class StatusActionBar extends ImmutablePureComponent {
               // emoji={meEmojiReact}
               onClick={this.handleLikeButtonClick}
             />
+          </Hoverable>
+
           {emojiReactCount !== 0 && (
             (features.exposableReactions && !features.emojiReacts) ? (
               <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='pointer-events-none'>
@@ -696,7 +700,7 @@ class StatusActionBar extends ImmutablePureComponent {
               <span className='detailed-status__link'>{emojiReactCount}</span>
             )
           )}
-        </Hoverable>
+        </div>
 
         {shareButton}
 

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -38,7 +38,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
   return (
     <HStack
       space={2}
-      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
+      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max')}
     >
       {emojis.map((emoji, i) => (
         <EmojiButton

app/soapbox/components/ui/hoverable/hoverable.tsx

@@ -1,5 +1,6 @@
-import Portal from '@reach/portal';
+import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
+import { usePopper } from 'react-popper';
 
 interface IHoverable {
   component: React.Component,
@@ -12,7 +13,9 @@ const Hoverable: React.FC<IHoverable> = ({
 }): JSX.Element => {
 
   const [portalActive, setPortalActive] = useState(false);
+
   const ref = useRef<HTMLDivElement>(null);
+  const popperRef = useRef<HTMLDivElement>(null);
 
   const handleMouseEnter = () => {
     setPortalActive(true);
@@ -22,17 +25,18 @@ const Hoverable: React.FC<IHoverable> = ({
     setPortalActive(false);
   };
 
-  const setPortalPosition = (): React.CSSProperties => {
+  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
-    if (!ref.current) return {};
+    placement: 'top-start',
-
+    strategy: 'fixed',
-    const { top, height, left, width } = ref.current.getBoundingClientRect();
+    modifiers: [
-
+      {
-    return {
+        name: 'offset',
-      top: top + height,
+        options: {
-      left,
+          offset: [-10, 0],
-      width,
+        },
-    };
+      },
-  };
+    ],
+  });
 
   return (
     <div
@@ -41,7 +45,17 @@ const Hoverable: React.FC<IHoverable> = ({
       ref={ref}
     >
       {children}
-      {portalActive && <Portal><div className='fixed' style={setPortalPosition()}>{component}</div></Portal>}
+
+      <div
+        className={classNames('fixed z-50 transition-opacity duration-100', {
+          'opacity-0 pointer-events-none': !portalActive,
+        })}
+        ref={popperRef}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {component}
+      </div>
     </div>
   );
 };