NextUIのTooltipを使う上で1個詰まった。

はじめに

みなさん、こんにちは torihaziです

現在、RailsとNext.js(NextUI)でXクローンを作っているのですが

作成する上でタイトルの件で少し詰まったのでそれを書き残そうかと思います

今作ってるやつ

結論

NextUIのtooltipを使うときは複数要素を表示させようとすると表示されません。
条件分岐してやらないとダメです。

どういうことか

最初、こんな感じでやろうとしてました。

<Tooltip
  key={item.tooltip}
  placement="bottom"
  content={item.tooltip}
>
  {item.children}
  {item.icon && <IconButton>{item.icon}</IconButton>}
  {/* {item.children ||
    (item.icon && <IconButton>{item.icon}</IconButton>)} */}
</Tooltip>

これ、mapで回していたのでitemとなっていますが、回そうとしていたのはこんな奴ら。
iconかchildrenがどっちかしかないような子達を作って表示させようとしてました。

export type inputIconItemType = {
  icon?: ReactNode;
  tooltip: string;
  children?: ReactNode;
};

export const inputIconItems: inputIconItemType[] = [
  {
    children: <InputFileButton icon={<Image size={18} />} name="images" />,
    tooltip: "Image",
  },
  {
    icon: <Videotape size={18} />,
    tooltip: "Gif",
  },
  {
    icon: <List size={18} />,
    tooltip: "Poll",
  },
  {
    icon: <Smile size={18} />,
    tooltip: "Emoji",
  },
  {
    icon: <Calendar size={18} />,
    tooltip: "Schedule",
  },
  {
    icon: <MapPin size={18} />,
    tooltip: "Geo",
  },
];

だから表示させる時もある意味条件分岐みたいな感じで必ず一個しか表示されないのではと思っていたのですが、結果は表示されませんでした。
このPostの隣に表示されるやつです。本家にもあるやつです。

そこでこうしたら表示されました。
ふーんという感じです。

<Tooltip
key={item.tooltip}
placement="bottom"
content={item.tooltip}
>
{item.children ||
  (item.icon && <IconButton>{item.icon}</IconButton>)}
</Tooltip>

ちなみに画像のところだけはボタン押したら画像選択できるようにはしました。

プレビューとかはまだですけど、一旦いいでしょう。

終わりに

ドキュメント見た限りそんなこと書いてなさそうに見えましたけど、

ダメなのなら従うしかないですね。

あ、そういえば

NextUI、Inputのコンポーネントはありますが、type="file"がないらしいですね。

ちなみにこれも他の見ながら作りました。

作り方についてはまた今度。