From ec87028d419c68daedf7b96b6a2de100b0f0dfdb Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 9 May 2023 00:29:29 +0800
Subject: [PATCH] add comment

---
 src/components/Tooltip/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 6b7641977978..13ac2f4a46f6 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -184,7 +184,6 @@ class Tooltip extends PureComponent {
             <>
                 {this.state.isRendered && (
                     <TooltipRenderedOnPageBody
-                        key={[this.props.text, ...this.props.renderTooltipContentKey]}
                         animation={this.animation}
                         windowWidth={this.props.windowWidth}
                         xOffset={this.state.xOffset}
@@ -197,6 +196,10 @@ class Tooltip extends PureComponent {
                         maxWidth={this.props.maxWidth}
                         numberOfLines={this.props.numberOfLines}
                         renderTooltipContent={this.props.renderTooltipContent}
+
+                        // We pass a key, so whenever the content changes this component will completely remount with a fresh state.
+                        // This prevents flickering/moving while remaining performant.
+                        key={[this.props.text, ...this.props.renderTooltipContentKey]}
                     />
                 )}
                 <Hoverable