React + Material-UI: 無効化(disabled)したButtonにTooltipを表示・非表示する

Material-UIのTooltipコンポーネントをButtonに使ったとき、disabledとの兼ね合わせで少し戸惑ったことについて書き留めます。

Material-UIとTooltipコンポーネント

Material-UIは、Googleが提唱するMaterial Designに則った、ユーザーインタフェースを提供するReactコンポーネントライブラリです(Material Designについては、「Googleが推奨する『マテリアルデザイン』とは？5つの特徴と、メリット・デメリット・作り方について解説」参照)。豊富なコンポーネントとシンプルで直感的なデザイン・操作感に定評があります。

Tooltipコンポーネントの使い方は、マウスが重なったたとき表示したい部品を包むだけです。titleに与えたテキストがツールチップとして表れます。

<Tooltip title="tooltip" arrow>
	<Button variant="contained" color="primary">
		button
	</Button>
</Tooltip>

無効化(disabled)したButtonにTooltipを出す

問題は、無効化(disabled)したButtonをTooltipコンポーネントで包んだ場合です。以下のようなメッセージが示されてしまいます。無効化されたButtonからはユーザー操作のイベントが送られないので、Tooltipが働かないということです。

<Tooltip title="disabled" arrow>
	// 変数disabledの値はtrue
	<Button variant="contained" color="primary" disabled={disabled}>
		disabled button
	</Button>
</Tooltip>

Material-UI: You are providing a disabled button child to the Tooltip component.
A disabled element does not fire events.
Tooltip needs to listen to the child element's events to display the title.

でも、この問題については公式サイトの「無効な要素」(原文「Disabled Elements」)できちんと説明されています。Buttonを別の要素、たとえば<span>でつぎのようにくるんでしまえばいいのです。

<Tooltip title="disabled" arrow>
	<span>
		<Button variant="contained" color="primary" disabled={disabled}>
			disabled button
		</Button>
	</span>
</Tooltip>

実は、メッセージにもそのヒントが示されていました。

Add a simple wrapper element, such as a span.

動的に変わるButtonの有効・無効に応じてTooltipの表示・非表示を切り替える

筆者が困ったのは、無効化したButtonにはTooltipを出したくないという場合でした。それなら、Tooltipを外せばいいと思われるかもしれません。でも、やりたかったのは、有効・無効は動的に切り替えてTooltipを表示・非表示したいということです。

そこで、無効のときは包んだ要素のstyleに、pointer-events: "none"を加えることで対応しました。以下にCodePenのサンプルも添えます。Buttonの有効・無効は、Checkboxで切り替えてください。

<Tooltip title="enabled" arrow>
	<span style={disabled ? { pointerEvents: "none" } : {}}>
		<Button variant="contained" color="primary" disabled={disabled}>
			button
		</Button>
	</span>
</Tooltip>

See the Pen React + Material-UI: Tooltip issue by Fumio Nonaka (@FumioNonaka) on CodePen.