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

@@ -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"

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