disabled なボタンにも Bootstrap のツールチップを表示したい

問題点

disabled 属性を持つボタン要素に Bootstrap の ツールチップ を表示することができない。

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="こんにちは 😇" disabled>
  ボタン
</button>

対策

まずボタン要素を div 要素でラップする。このとき、ツールチップの表示に必要な data 属性や title 属性をこの div 要素に移動する。

<div class="button-wrapper" data-toggle="tooltip" data-placement="top" title="こんにちは 😇">
  <button type="button" class="btn btn-secondary" disabled>
    ボタン
  </button>
<div>

次に以下の CSS を追加する。

.button-wrapper {
  /* wrapper の幅を内包する要素に合わせる。 */
  display: inline-block;
}

.button-wrapper .btn:disabled {
  /* マウスをホバーした際のイベント伝搬を止めないようにする。 */
  pointer-events: none;
}

デモ

See the Pen Show Bootstrap tooltip on disabled button by QUANON (@quanon) on CodePen.