Chakra UIのTooltipはコンポーネントをラップするだけで表示することができる。
import { Tooltip, Box } from '@chakra-ui/react';<Tooltip isOpen={true} label='ツールチップの内容'> <Box>テスト</Box></Tooltip>
でもカスタムコンポーネントの場合、同じようにラップしてもTooltipが画面の端に出現したりしてうまく表示されない。
function Test(props: BoxProps) => { return <Box {...props }>テスト</Box>;}<Tooltip isOpen={true} label='ツールチップの内容'> <Test/></Tooltip>
コンソールを見てみると次のような警告が出ていた。
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Tooltipは子要素にrefを渡して位置情報を取得しているらしい。カスタムコンポーネントではrefが渡せないためうまく表示されていなかった。
forwardRefを使うとこでカスタムコンポーネントにrefを渡すことができる。
import { Tooltip, Box, forwardRef } from '@chakra-ui/react';const Test = forwardRef<BoxProps, typeof Box>(function Test(props) { return <Box {...props }>テスト</Box>;})<Tooltip isOpen={true} label='ツールチップの内容'> <Test/></Tooltip>
forwardRefにはReactのものとChakra UIのものがあるが、refを渡すだけならどちらでも問題ない。asプロップを渡す場合はChakra UIのforwardRefを使うらしい。
Typescriptを使っている場合は、Chakra UIのforwardRefのジェネリクスにpropsの型とコンポーネントの型を指定する。ReactのforwardRefのジェネリクスとは順序が逆なため間違いやすい。
forwardRefを使うことは公式ドキュメントにも書いてあったが知らずに手間取ってしまった・・・
Note 🚨: If the Tooltip is wrapping a functional component, ensure that the functional component accepts a ref using forwardRef.