diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
index cead13e6..dae983c4 100644
--- a/src/components/common/Tooltip.tsx
+++ b/src/components/common/Tooltip.tsx
@@ -14,7 +14,7 @@ export default function Tooltip(props: Props) {
     const { children, content, ...tippyProps } = props;
 
     return (
-        <Tippy content={content} {...tippyProps}>
+        <Tippy content={content} animation="shift-away" {...tippyProps}>
             {/*
             // @ts-expect-error Type mis-match. */}
             <div style={`display: flex;`}>{children}</div>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index fee69ec7..ddc6134e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,6 +5,7 @@
 
 @import "react-overlapping-panels/dist";
 @import "tippy.js/dist/tippy.css";
+@import "tippy.js/animations/shift-away.css";
 
 .tippy-box {
     color: var(--foreground);