BootstrapのtooltipをDisableなボタンに対して実装する。

tooltipはマウスをホバーした際にTipsを表示する際に利用するとUIがスッキリして良いです。 これをDisable担っているButtonに対して、ユーザがなぜそのButtonがDisableになっているかを知ることが出来るよな情報を提示してあげられると親切です。 しかし、DisableなButtonに対してはdata-contentを実装してもTipsは表示されません。

このような需要がある際にはButtanの外側を<div>や<span>で囲み、それに対してdata-contentを与えればよいです。 具体定期は以下のような変更を加えます。

変更前のDisableでないButtonに対するTipsの実装が以下である場合、

<button data-content="you can not click this becaouse hogehoge" data-toggle="popover">
    OK
</button>

変更後は、

<span data-content="you can not click this becaouse hogehoge" data-toggle="popover">
<button style="pointer-events: none;" disable>
    OK
</button>
</span>

これでDisableであるButtonに対してもTipsを表示させられると思います。 詳しくはBootstrapの公式サイトなどをご参照ください。