diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index ff611b4..5ac9812 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -896,7 +896,7 @@ function SpeciesFaceOption({
return (
{({ css }) => (
-
-
+
+ )}
+
+ );
+}
+
+/**
+ * DeferredTooltip is like Chakra's , but it waits until `isOpen` is
+ * true before mounting it, and unmounts it after closing.
+ *
+ * This can drastically improve render performance when there are lots of
+ * tooltip targets to re-render… but it comes with some limitations, like the
+ * extra requirement to control `isOpen`, and some additional DOM structure!
+ */
+function DeferredTooltip({ children, isOpen, ...props }) {
+ const [shouldShowTooltip, setShouldShowToolip] = React.useState(isOpen);
+
+ React.useEffect(() => {
+ if (isOpen) {
+ setShouldShowToolip(true);
+ } else {
+ const timeoutId = setTimeout(() => setShouldShowToolip(false), 500);
+ return () => clearTimeout(timeoutId);
+ }
+ }, [isOpen]);
+
+ return (
+
+ {({ css }) => (
+