buttonがdisabled時にtitle属性を表示させる方法

問題

ある条件の時にbuttonをdisabledして使用不可にした際に, 使用不可である理由をtitle属性を用いたtooltipで表示したい時がある. しかし, bottonをdisabledさせると, マウスホバー時のイベントが無効になってしまうため, マウスホバーをさせてもtooltipが表示されないことがある.

解決法

1. pointer-events: autoを与える

<button disabled style='pointer-events: auto' 
title='ツールチップの内容' >
  ボタン
</button>

2. 対象をdivタグでくくり, それにtitle属性を与える

<div title='ツールチップの内容'>
  <button disabled >ボタン</button>
</div>

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events