diff --git a/app/components/Theme.tsx b/app/components/Theme.tsx
index 4da706e47..282dda277 100644
--- a/app/components/Theme.tsx
+++ b/app/components/Theme.tsx
@@ -7,6 +7,7 @@ import { dark, light, lightMobile, darkMobile } from "@shared/styles/theme";
 import { UserPreference } from "@shared/types";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "~/hooks/useStores";
+import { TooltipStyles } from "./Tooltip";
 
 const Theme: React.FC = ({ children }) => {
   const { auth, ui } = useStores();
@@ -28,6 +29,7 @@ const Theme: React.FC = ({ children }) => {
   return (
     <ThemeProvider theme={theme}>
       <>
+        <TooltipStyles />
         <GlobalStyles
           useCursorPointer={auth.user?.getPreference(
             UserPreference.UseCursorPointer,
diff --git a/app/components/Tooltip.tsx b/app/components/Tooltip.tsx
index 98ae515f3..45d4fb799 100644
--- a/app/components/Tooltip.tsx
+++ b/app/components/Tooltip.tsx
@@ -1,7 +1,8 @@
-import Tippy, { TippyProps } from "@tippy.js/react";
+import Tippy, { TippyProps } from "@tippyjs/react";
 import { TFunctionResult } from "i18next";
 import * as React from "react";
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
+import { roundArrow } from "tippy.js";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
   tooltip: React.ReactChild | React.ReactChild[] | TFunctionResult;
@@ -12,7 +13,7 @@ function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) {
   let content = <>{tooltip}</>;
 
   if (!tooltip) {
-    return rest.children;
+    return rest.children ?? null;
   }
 
   if (shortcut) {
@@ -24,9 +25,8 @@ function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) {
   }
 
   return (
-    <StyledTippy
-      arrow
-      arrowType="round"
+    <Tippy
+      arrow={roundArrow}
       animation="shift-away"
       content={content}
       delay={delay}
@@ -52,13 +52,139 @@ const Shortcut = styled.kbd`
   border-radius: 3px;
 `;
 
-const StyledTippy = styled(Tippy)`
-  font-size: 13px;
-  background-color: ${(props) => props.theme.tooltipBackground};
-  color: ${(props) => props.theme.tooltipText};
+export const TooltipStyles = createGlobalStyle`
+ .tippy-box[data-animation=fade][data-state=hidden]{
+    opacity:0
+  }
+  [data-tippy-root]{
+      max-width:calc(100vw - 10px)
+  }
+  .tippy-box{
+      position:relative;
+      background-color: ${(props) => props.theme.tooltipBackground};
+      color: ${(props) => props.theme.tooltipText};
+      border-radius:4px;
+      font-size:13px;
+      line-height:1.4;
+      white-space:normal;
+      outline:0;
+      transition-property:transform,visibility,opacity
+  }
+  .tippy-box[data-placement^=top]>.tippy-arrow{
+      bottom:0
+  }
+  .tippy-box[data-placement^=top]>.tippy-arrow:before{
+      bottom:-7px;
+      left:0;
+      border-width:8px 8px 0;
+      border-top-color:initial;
+      transform-origin:center top
+  }
+  .tippy-box[data-placement^=bottom]>.tippy-arrow{
+      top:0
+  }
+  .tippy-box[data-placement^=bottom]>.tippy-arrow:before{
+      top:-7px;
+      left:0;
+      border-width:0 8px 8px;
+      border-bottom-color:initial;
+      transform-origin:center bottom
+  }
+  .tippy-box[data-placement^=left]>.tippy-arrow{
+      right:0
+  }
+  .tippy-box[data-placement^=left]>.tippy-arrow:before{
+      border-width:8px 0 8px 8px;
+      border-left-color:initial;
+      right:-7px;
+      transform-origin:center left
+  }
+  .tippy-box[data-placement^=right]>.tippy-arrow{
+      left:0
+  }
+  .tippy-box[data-placement^=right]>.tippy-arrow:before{
+      left:-7px;
+      border-width:8px 8px 8px 0;
+      border-right-color:initial;
+      transform-origin:center right
+  }
+  .tippy-box[data-inertia][data-state=visible]{
+      transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)
+  }
+  .tippy-arrow{
+      width:16px;
+      height:16px;
+      color: ${(props) => props.theme.tooltipBackground};
+  }
+  .tippy-arrow:before{
+      content:"";
+      position:absolute;
+      border-color:transparent;
+      border-style:solid
+  }
+  .tippy-content{
+      position:relative;
+      padding:5px 9px;
+      z-index:1
+  }
+ 
+  /* Arrow Styles */
+  .tippy-box[data-placement^=top]>.tippy-svg-arrow{
+    bottom:0
+  }
+  .tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{
+      top:16px;
+      transform:rotate(180deg)
+  }
+  .tippy-box[data-placement^=bottom]>.tippy-svg-arrow{
+      top:0
+  }
+  .tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{
+      bottom:16px
+  }
+  .tippy-box[data-placement^=left]>.tippy-svg-arrow{
+      right:0
+  }
+  .tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{
+      transform:rotate(90deg);
+      top:calc(50% - 3px);
+      left:11px
+  }
+  .tippy-box[data-placement^=right]>.tippy-svg-arrow{
+      left:0
+  }
+  .tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{
+      transform:rotate(-90deg);
+      top:calc(50% - 3px);
+      right:11px
+  }
+  .tippy-svg-arrow{
+      width:16px;
+      height:16px;
+      fill: ${(props) => props.theme.tooltipBackground};
+      text-align:initial
+  }
+  .tippy-svg-arrow,.tippy-svg-arrow>svg{
+      position:absolute
+  }
 
-  svg {
-    fill: ${(props) => props.theme.tooltipBackground};
+  /* Animation */
+  .tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{transform:translateX(-10px)}
+
+  .tippy-box[data-animation=shift-away][data-state=hidden]{
+    opacity:0
+  }
+  .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{
+      transform:translateY(10px)
+  }
+  .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{
+      transform:translateY(-10px)
+  }
+  .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{
+      transform:translateX(10px)
+  }
+  .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{
+      transform:translateX(-10px)
   }
 `;
 
diff --git a/app/editor/components/Tooltip.tsx b/app/editor/components/Tooltip.tsx
index 670a8eabe..b31767fee 100644
--- a/app/editor/components/Tooltip.tsx
+++ b/app/editor/components/Tooltip.tsx
@@ -7,7 +7,7 @@ type Props = {
 };
 
 const WrappedTooltip: React.FC<Props> = ({ children, tooltip }) => (
-  <Tooltip offset="0, 8" delay={150} tooltip={tooltip} placement="top">
+  <Tooltip offset={[0, 16]} delay={150} tooltip={tooltip} placement="top">
     <TooltipContent>{children}</TooltipContent>
   </Tooltip>
 );
diff --git a/package.json b/package.json
index f02c7bcd1..3ac19cca2 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "@sentry/react": "^7.14.0",
     "@sentry/tracing": "^7.14.0",
     "@theo.gravity/datadog-apm": "2.2.0",
-    "@tippy.js/react": "^2.2.2",
+    "@tippyjs/react": "^4.2.6",
     "@tommoor/remove-markdown": "^0.3.2",
     "@types/mermaid": "^8.2.9",
     "autotrack": "^2.4.1",
diff --git a/yarn.lock b/yarn.lock
index 5cc0c6640..8ffdca1eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2046,10 +2046,10 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.5.4":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
-  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+"@popperjs/core@^2.5.4", "@popperjs/core@^2.9.0":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
@@ -2543,13 +2543,12 @@
   dependencies:
     dd-trace "^1.7.1"
 
-"@tippy.js/react@^2.2.2":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@tippy.js/react/-/react-2.2.3.tgz#2ffb0af6693055be7db4b329b2d3cc7f2356f68e"
-  integrity sha512-5XYvbQujzDj9r00JYEz/cBtm6DutjOdv2azdco53B+eWF7FDBCQfkLVn87wimfEpmGK0vqRQv/cwFxFcoOP98Q==
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
   dependencies:
-    prop-types "^15.6.2"
-    tippy.js "^4.3.4"
+    tippy.js "^6.3.1"
 
 "@tommoor/remove-markdown@^0.3.2":
   version "0.3.2"
@@ -12314,11 +12313,6 @@ popmotion@9.3.6:
     style-value-types "4.1.4"
     tslib "^2.1.0"
 
-popper.js@^1.14.7:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -14898,12 +14892,12 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tippy.js@^4.3.4:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
-  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+tippy.js@^6.3.1:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
   dependencies:
-    popper.js "^1.14.7"
+    "@popperjs/core" "^2.9.0"
 
 tmp@^0.2.1:
   version "0.2.1"