From bf85cef922d54d050ae02d8be42d0848704b177b Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 10 Feb 2021 13:10:17 -0800
Subject: [PATCH] Fix HTML5Badge tooltip on mobile

---
 src/app/ItemPage.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 0e8a173..5ede8a0 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -980,12 +980,19 @@ function HTML5Badge({ usesHTML5, isLoading }) {
 }
 
 function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+
   return (
     <Tooltip
       textAlign="center"
       fontSize="xs"
       placement="bottom-start"
       label={tooltipLabel}
+      // HACK: Chakra tooltips seem inconsistent about staying open when focus
+      //       comes from touch events. But I really want this one to work on
+      //       mobile!
+      isOpen={isHovered || isFocused}
     >
       <Flex
         align="center"
@@ -997,6 +1004,10 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
         transition="all 0.2s"
         tabIndex="0"
         _focus={{ outline: "none", boxShadow: "outline" }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
         {...props}
       >
         {children}