OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Fix HTML5Badge tooltip on mobile

Browse source
This commit is contained in:
Emi Matchu 2021-02-10 13:10:17 -08:00
parent 2403bd813a
commit bf85cef922
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app/ItemPage.js
View file

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