😎

ChakraUIのTooltipコンポーネントをモバイル端末上でもいい感じに表示したい

2024/11/06に公開

Chakra UI

tech

状況

ChakraUI（2系）を使ってて、PC上ではツールチップを問題なく表示できているのに、iPadなどのモバイルデバイスではうまく表示されなかったり、ちらついたりする状況になっていた。

解決策

ChakraUI本家のGithub Issueにも同様の報告がされており、対処法が掲載されていた。

サンプルコード：

const Pin: FC<PinProps> = ({ label }) => {
    const [isLabelOpen, setIsLabelOpen] = useState(false)

    return (
        <Tooltip label={label} isOpen={isLabelOpen}>
            <Image
                src="/images/map_pin.svg"
                alt={label}
                onMouseEnter={() => setIsLabelOpen(true)}
                onMouseLeave={() => setIsLabelOpen(false)}
                onClick={() => setIsLabelOpen(true)}
            />
        </Tooltip>
    )
}

つまり、useStateフックを使い、TooltipコンポーネントにはisOpenのpropを使う。そしてTooltipに内包するアイコンなどの要素にonClick, onMouseEnter,onMouseLeaveでstateをセットするようだ。

const [showTooltip, setshowTooltip] = useState(false)

<Tooltip
    label={label}
    isOpen={showTooltip}
>
    <QuestionIcon
        onClick={() => setShowTooltip(!showTooltip)}
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
    />
</Tooltip>

このようにすると、iPad上でもツールチップをクリックすることで表示したい要素（label）が表示されるようになった。

なお、「なぜこれがデフォルトの挙動ではないのか？」という議論が同Issueで起きていたが、ChakraUIの作者であるsegunadebayo氏は「そもそもモバイルデバイス上でツールチップを表示するのはbad UXなのでおすすめしない」とのことだった。
ご、ごめんなさい…。

状況

解決策

Discussion