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.