【React】Chakra UIのIconでReact Iconsを使うとTooltipが使えない

Chakra UIのIconでReact Iconsを使うとTooltipがブラウザ左上隅に固定で表示されてしまってまともに使えないのをなんとかしたい！

概要

今回の記事では、Chakra UIのIconでReact Iconsを使うとTooltipがブラウザ左上隅に固定で表示されてしまってまともに使えないのをなんとかする手順を掲載する。

仕様書

環境

• react 18.2.0
• react-icons 4.11.0
• chakra-ui/react 2.8.1

手順書

アイコンの要素？の関係でTooltipの表示位置が意図しない場所になってしまうらしい。
Iconをspanなどインラインの要素の中に入れることでTooltipの表示位置が設定通りの場所になる。

import { Icon } from '@chakra-ui/react';
import { MdCheck } from "react-icons/md";

const MyIcon: React.FC = () => {
    return (
        <Tooltip label="チェック済み！" placement="top">
            <span>
                <Icon color='gray.500' as={MdCheck} w={8} h={8}/>
            </span>
        </Tooltip>
    );
}

まとめ（感想文）

インライン要素になることで今度は微妙に表示のされ方が変わるのでレイアウトの調整が必要に…。