From 614dc0795af0a9064de9712a30e52c17a4a03830 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 12 Feb 2021 18:35:16 -0800
Subject: [PATCH] Switch to bottom tooltips for zone/html5 info

I've decided that covering up the species faces with other species info is too weird! It feels like it's removing some ability to cross-reference.

A cool UI affordance would be to have this and the faces interact with each other, like you can hover to highlight the relevant species faces, or even vice-versa, to show the relevant zones for this species. But that's probably way overkill for this relatively niche feature.
---
 src/app/ItemPage.js              | 6 +++++-
 src/app/components/HTML5Badge.js | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 38c82f8..79f113e 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1412,7 +1412,11 @@ function ItemZonesInfoListItem({ zoneLabel, bodies, showBodyInfo }) {
       content = (
         <>
           {content}{" "}
-          <Tooltip label={speciesListString} textAlign="center" placement="top">
+          <Tooltip
+            label={speciesListString}
+            textAlign="center"
+            placement="bottom"
+          >
             <Box
               as="span"
               tabIndex="0"
diff --git a/src/app/components/HTML5Badge.js b/src/app/components/HTML5Badge.js
index 0aaf0bb..7e9a4fb 100644
--- a/src/app/components/HTML5Badge.js
+++ b/src/app/components/HTML5Badge.js
@@ -99,7 +99,7 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
     <Tooltip
       textAlign="center"
       fontSize="xs"
-      placement="top"
+      placement="bottom"
       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