feat(post): add tooltips for title and display names that are too long

src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { default } from './tooltip';

src/components/tooltip/tooltip.module.css

@@ -0,0 +1,27 @@
+.tooltip {
+  position: absolute;
+  background-color: #181f24;
+  font-size: 11px;
+  line-height: 13px;
+  padding: 3px 6px;
+  z-index: 100000;
+  word-wrap: break-word;
+  white-space: pre-line;
+  max-width: 400px;
+  color: #fff;
+  text-align: center;
+}
+
+.tooltip::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #181f24;
+  margin-left: -4px;
+  bottom: -4px;
+  left: 50%;
+}

src/components/tooltip/tooltip.tsx

@@ -0,0 +1,50 @@
+import { useState, ReactNode } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
+import styles from './tooltip.module.css';
+
+interface TooltipProps {
+  content: string;
+  children: ReactNode;
+}
+
+const Tooltip = ({ content, children }: TooltipProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'top',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        fallbackAxisSideDirection: 'start',
+      }),
+      shift(),
+    ],
+  });
+
+  const hover = useHover(context, { move: false, delay: { open: 250, close: 0 } });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+  return (
+    <>
+      <span ref={refs.setReference} {...getReferenceProps()}>
+        {children}
+      </span>
+      <FloatingPortal>
+        {isOpen && (
+          <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            {content}
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  );
+};
+
+export default Tooltip;