react-tippyでコンテンツがはみ出るときに無理やりtooltipのwidthを大きくする方法

多分これが一番早いと思います。

react-tippy 便利です。rc-tooltipより簡単にリッチなツールチップを作れるので重宝しています。

react-tippy でコンテンツをカスタマイズするときは html という props を渡してあげれば良いのですが、渡すコンポーネントの幅が大きすぎるとツールチップの幅を飛び出してデザインが崩れます。

そういうときはこうしてやります。

index.css

.tippy-popper {
  max-width: 10000px !important;
}

react-tippy/dist/tippy.js に max-width: 450px と記述されているのでこいつを無効にしてやる必要があるのです。おそらく props に文字列を渡すときはいい感じに改行されてほしいためこんな記述があるのだと思いますが、html を渡すときは邪魔なだけなので無効にしてしまって良いのではないでしょうか。

ちなみにこういうのを作っていました（食べ物のサムネイルにホバーすると栄養素を見ることができるやつ）。