🤖
NextUIのTooltip使ってたら1つ詰まった件

2024/10/18に公開
 はじめにみなさん、こんにちは 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"がないらしいですね。
ちなみにこれも他の見ながら作りました。
作り方についてはまた今度。
はじめに

結論

どういうことか

終わりに

Discussion
