● Bootstrap4 で disabled な button にも tooltip を表示させる

1. html ( button を div で囲み、title をコピーする )

<button data-toggle="tooltip" type="button" disabled="disabled" title="このデータは削除できません" class="btn"></button>

　↓

<div class="button-wrapper" data-toggle="tooltip">
	<button data-toggle="tooltip" type="button" disabled="disabled" title="このデータは削除できません" class="btn"></button>
</div>

2. css

<style>
.tooltip.show {
    opacity: 0.95;
}

.tooltip .tooltip-inner {
    font-size: 12px;
    color: red;
    background-color: #fff;
    border: solid 1px #333;
    opacity: 1.0;
}

/* disabled な button に tooltipを適用させる */
.button-wrapper {
  display: inline-block;
}
.button-wrapper .btn:disabled {
  pointer-events: none;
}
</style>

3. JavaScript

div タグに title を自動的にセットする命令を加えます

<script>
$(function () {
	$('.button-wrapper').attr('title', $('.button-wrapper button').attr('title') );	// divタグに titleをセットする
	$('[data-toggle="tooltip"]').tooltip();
})
</script>