Merge pull request #4010 from webkom/set-default-tooltip-placement

webkom · Jul 4, 2023 · 0298928 · 0298928
2 parents 054451c + f30f4ca
commit 0298928
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/app/components/Tooltip/index.tsx b/app/components/Tooltip/index.tsx
@@ -8,10 +8,18 @@ type Props = {
   content: ReactNode;
   className?: string;
   onClick?: () => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
   style?: CSSProperties;
 };
 
-const Tooltip = ({ children, content, className, style, onClick }: Props) => {
+const Tooltip = ({
+  children,
+  content,
+  className,
+  onClick,
+  placement,
+  style,
+}: Props) => {
   const [hovered, setHovered] = useState(false);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -22,8 +30,14 @@ const Tooltip = ({ children, content, className, style, onClick }: Props) => {
     attributes,
     update,
   } = usePopper(triggerRef.current, tooltipRef.current, {
-    placement: 'auto',
+    placement: placement || 'top',
     modifiers: [
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top', 'bottom', 'left', 'right'],
+        },
+      },
       {
         name: 'arrow',
         options: {