はじめに

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

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

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

今作ってるやつスクリーンショット 2024-10-18 13.42.33.png

結論

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の隣に表示されるやつです。本家にもあるやつです。スクリーンショット 2024-10-18 13.47.41.png

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

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