概要

MUIのTooltipは、ホバーした時に吹き出しを表示させるコンポーネントです。この吹き出しの中でtitleに改行文字を含む値を入れて設定したのですが、Tooltipのコンポーネントに改行用のスタイルをあてても効きません。
というわけで、どうやって改行文字を含む文言のスタイルを当てればいいのかというメモ書きです。

前提

使用したmui/materialのバージョンは6.4.6です。

対応方針

こちらのstackoverflowの回答にある通り、Tooltipのtitleにelementを設定します。実際にtitleに設定できる型はReactNodeになっています。

実装サンプル

import { FC } from "react";
import { Button, Tooltip } from "@mui/material";

export const TooltipSample: FC = () => {
  return (
    <div style={{ marginTop: "20px" }}>
      <Tooltip
        title={
          <div style={{ whiteSpace: "pre-line" }}>{`sample1
sample2`}</div>
        }
      >
        <Button variant="contained" sx={{ textTransform: "none" }}>
          tooltip改行テスト
        </Button>
      </Tooltip>
    </div>
  );
};

以下のように改行が反映されて表示されます。