diff --git a/packages/dashboard/src/components/palette/icons/index.tsx b/packages/dashboard/src/components/palette/icons/index.tsx
index beac07491..2f27be7ea 100644
--- a/packages/dashboard/src/components/palette/icons/index.tsx
+++ b/packages/dashboard/src/components/palette/icons/index.tsx
@@ -16,53 +16,53 @@ type PaletteComponentIconProps = {
   Icon: React.FC;
   widgetName: string;
 };
+
+const Tooltip = styled.div<{ hover: boolean }>`
+  ${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
+  font-size: ${fontSizeHeadingS};
+  color: ${colorTextBodyDefault};
+  background-color: ${colorBackgroundSegmentHover};
+  padding: ${spaceStaticS} ${spaceStaticM};
+  border-radius: ${borderRadiusPopover};
+  border-width: 2px;
+  border-color: ${colorBorderButtonNormalDisabled};
+  box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
+  position: absolute;
+  left: 50%;
+  top: 105%;
+  border-style: solid;
+  z-index: 9;
+  transform: translateX(-50%);
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    left: 50%;
+    right: 50%;
+    margin: auto;
+    margin-left: -10px;
+    transform: rotate(180deg);
+  }
+  &::before {
+    bottom: 92%;
+    border-top: 11px solid ${colorBorderButtonNormalDisabled};
+    margin-bottom: 5px;
+  }
+  &::after {
+    bottom: 100%;
+    border-top: 10px solid ${colorBackgroundSegmentHover};
+    margin-top: -2px;
+    z-index: 1;
+  }
+`;
 const PaletteComponentIcon: React.FC<PaletteComponentIconProps> = ({
   Icon,
   widgetName,
 }) => {
   const [hover, setHover] = useState<boolean>(false);
 
-  const Tooltip = styled.div<{ hover: boolean }>`
-    ${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
-    font-size: ${fontSizeHeadingS};
-    color: ${colorTextBodyDefault};
-    background-color: ${colorBackgroundSegmentHover};
-    padding: ${spaceStaticS} ${spaceStaticM};
-    border-radius: ${borderRadiusPopover};
-    border-width: 2px;
-    border-color: ${colorBorderButtonNormalDisabled};
-    box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
-    position: absolute;
-    left: 50%;
-    top: 105%;
-    border-style: solid;
-    z-index: 9;
-    transform: translateX(-50%);
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      left: 50%;
-      right: 50%;
-      margin: auto;
-      margin-left: -10px;
-      transform: rotate(180deg);
-    }
-    &::before {
-      bottom: 92%;
-      border-top: 11px solid ${colorBorderButtonNormalDisabled};
-      margin-bottom: 5px;
-    }
-    &::after {
-      bottom: 100%;
-      border-top: 10px solid ${colorBackgroundSegmentHover};
-      margin-top: -2px;
-      z-index: 1;
-    }
-  `;
-
   // Without this, Firefox widget drag and drop does not work correctly.
   const ignoreDragStart: DragEventHandler = (event) => event.preventDefault();
 
diff --git a/packages/react-components/src/components/tooltip/tooltip.tsx b/packages/react-components/src/components/tooltip/tooltip.tsx
index b96886e66..4a614aa70 100644
--- a/packages/react-components/src/components/tooltip/tooltip.tsx
+++ b/packages/react-components/src/components/tooltip/tooltip.tsx
@@ -14,6 +14,144 @@ import {
 } from './constants';
 import styled, { css } from 'styled-components';
 
+interface TooltipProps {
+  position: 'bottom' | 'top' | 'right' | 'left';
+}
+
+const tooltipPositionStyles = {
+  top: css`
+    bottom: -30%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  `,
+  bottom: css`
+    top: 115%;
+    left: 50%;
+    transform: translateX(-50%) translateY(12px);
+  `,
+  left: css`
+    top: 50%;
+    left: 10%;
+    transform: translateX(-100%) translateY(-50%);
+  `,
+  right: css`
+    top: 50%;
+    left: 90%;
+    transform: translateX(0) translateY(-50%);
+  `,
+};
+
+const TooltipContainer = styled.span`
+  position: relative;
+  display: inline-block;
+`;
+
+const TooltipText = styled.div<TooltipProps>`
+  position: absolute;
+  visibility: hidden;
+  z-index: 99;
+  text-align: center;
+  ${({ position }) => tooltipPositionStyles[position]}
+
+  ${TooltipContainer}:hover & {
+    visibility: visible;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+  }
+  &::before {
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+  }
+
+  ${({ position }) =>
+    position === 'top' &&
+    css`
+      &::after,
+      &::before {
+        top: 100%;
+        left: 50%;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+      }
+      &::before {
+        border-top: 12px solid ${colorBorderControlDefault};
+      }
+      &::after {
+        border-top: 13px solid ${colorBackgroundContainerContent};
+        margin-top: -2px;
+        z-index: 1;
+      }
+    `}
+
+  ${({ position }) =>
+    position === 'bottom' &&
+    css`
+      &::after,
+      &::before {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+      }
+      &::before {
+        border-bottom: 12px solid ${colorBorderControlDefault};
+      }
+      &::after {
+        border-bottom: 12px solid ${colorBackgroundContainerContent};
+        margin-bottom: -2px;
+        z-index: 1;
+      }
+    `}
+
+    ${({ position }) =>
+    position === 'left' &&
+    css`
+      &::after,
+      &::before {
+        top: 50%;
+        left: 100%;
+        transform: translateY(-50%);
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+      }
+      &::before {
+        border-left: 12px solid ${colorBorderControlDefault};
+      }
+      &::after {
+        border-left: 12px solid ${colorBackgroundContainerContent};
+        margin-left: -2px;
+        z-index: 1;
+      }
+    `}
+
+    ${({ position }) =>
+    position === 'right' &&
+    css`
+      &::after,
+      &::before {
+        top: 50%;
+        right: 100%;
+        transform: translateY(-50%);
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+      }
+      &::before {
+        border-right: 10px solid ${colorBorderControlDefault};
+      }
+      &::after {
+        border-right: 11px solid ${colorBackgroundContainerContent};
+        margin-right: -2px;
+        z-index: 1;
+      }
+    `}
+`;
+
 export const Tooltip = ({
   content,
   position,
@@ -55,144 +193,6 @@ export const Tooltip = ({
     e.stopPropagation();
   };
 
-  interface TooltipProps {
-    position: 'bottom' | 'top' | 'right' | 'left';
-  }
-
-  const tooltipPositionStyles = {
-    top: css`
-      bottom: -30%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-100%);
-    `,
-    bottom: css`
-      top: 115%;
-      left: 50%;
-      transform: translateX(-50%) translateY(12px);
-    `,
-    left: css`
-      top: 50%;
-      left: 10%;
-      transform: translateX(-100%) translateY(-50%);
-    `,
-    right: css`
-      top: 50%;
-      left: 90%;
-      transform: translateX(0) translateY(-50%);
-    `,
-  };
-
-  const TooltipContainer = styled.span`
-    position: relative;
-    display: inline-block;
-  `;
-
-  const TooltipText = styled.div<TooltipProps>`
-    position: absolute;
-    visibility: hidden;
-    z-index: 99;
-    text-align: center;
-    ${({ position }) => tooltipPositionStyles[position]}
-
-    ${TooltipContainer}:hover & {
-      visibility: visible;
-    }
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-    }
-    &::before {
-      width: 0;
-      height: 0;
-      border: 6px solid transparent;
-    }
-
-    ${({ position }) =>
-      position === 'top' &&
-      css`
-        &::after,
-        &::before {
-          top: 100%;
-          left: 50%;
-          border-left: 12px solid transparent;
-          border-right: 12px solid transparent;
-        }
-        &::before {
-          border-top: 12px solid ${colorBorderControlDefault};
-        }
-        &::after {
-          border-top: 13px solid ${colorBackgroundContainerContent};
-          margin-top: -2px;
-          z-index: 1;
-        }
-      `}
-
-    ${({ position }) =>
-      position === 'bottom' &&
-      css`
-        &::after,
-        &::before {
-          bottom: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          border-left: 12px solid transparent;
-          border-right: 12px solid transparent;
-        }
-        &::before {
-          border-bottom: 12px solid ${colorBorderControlDefault};
-        }
-        &::after {
-          border-bottom: 12px solid ${colorBackgroundContainerContent};
-          margin-bottom: -2px;
-          z-index: 1;
-        }
-      `}
-  
-      ${({ position }) =>
-      position === 'left' &&
-      css`
-        &::after,
-        &::before {
-          top: 50%;
-          left: 100%;
-          transform: translateY(-50%);
-          border-top: 8px solid transparent;
-          border-bottom: 8px solid transparent;
-        }
-        &::before {
-          border-left: 12px solid ${colorBorderControlDefault};
-        }
-        &::after {
-          border-left: 12px solid ${colorBackgroundContainerContent};
-          margin-left: -2px;
-          z-index: 1;
-        }
-      `}
-
-      ${({ position }) =>
-      position === 'right' &&
-      css`
-        &::after,
-        &::before {
-          top: 50%;
-          right: 100%;
-          transform: translateY(-50%);
-          border-top: 8px solid transparent;
-          border-bottom: 8px solid transparent;
-        }
-        &::before {
-          border-right: 10px solid ${colorBorderControlDefault};
-        }
-        &::after {
-          border-right: 11px solid ${colorBackgroundContainerContent};
-          margin-right: -2px;
-          z-index: 1;
-        }
-      `}
-  `;
-
   return (
     <TooltipContainer
       onMouseEnter={handleMouseEnter}