Fix tooltip bugs

ts/components/Tooltip.tsx

@@ -0,0 +1,81 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { Manager, Reference, Popper } from 'react-popper';
+
+export enum TooltipPlacement {
+  Top = 'top',
+  Right = 'right',
+  Bottom = 'bottom',
+  Left = 'left',
+}
+
+export type PropsType = {
+  content: string | JSX.Element;
+  direction?: TooltipPlacement;
+  sticky?: boolean;
+};
+
+export const Tooltip: React.FC<PropsType> = ({
+  children,
+  content,
+  direction,
+  sticky,
+}) => {
+  const isSticky = Boolean(sticky);
+  const [showTooltip, setShowTooltip] = React.useState(isSticky);
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <span
+            onBlur={() => {
+              if (!isSticky) {
+                setShowTooltip(false);
+              }
+            }}
+            onFocus={() => {
+              if (!isSticky) {
+                setShowTooltip(true);
+              }
+            }}
+            onMouseEnter={() => {
+              if (!isSticky) {
+                setShowTooltip(true);
+              }
+            }}
+            onMouseLeave={() => {
+              if (!isSticky) {
+                setShowTooltip(false);
+              }
+            }}
+            ref={ref}
+          >
+            {children}
+          </span>
+        )}
+      </Reference>
+      <Popper placement={direction}>
+        {({ arrowProps, placement, ref, style }) =>
+          showTooltip && (
+            <div
+              className="module-tooltip"
+              ref={ref}
+              style={style}
+              data-placement={placement}
+            >
+              {content}
+              <div
+                className="module-tooltip-arrow"
+                ref={arrowProps.ref}
+                style={arrowProps.style}
+              />
+            </div>
+          )
+        }
+      </Popper>
+    </Manager>
+  );
+};