Bootstrap のツールチップを左右にずらして表示する

お仕事で、

ツールチップが画面からはみ出そうだけど、回避して表示できませんか？

と訊かれたので、ちょっとがんばってみました。
画面右端でツールチップを表示する場合などに便利です。

環境

Bootstrap 5.0.0-alpha1
古い Bootstrap でも同様にスタイルを設定することで問題なく使えます。

0. 下準備

適当にツールチップを表示させて、ツールチップ 1 行分の「.tooltip-inner」の高さを確認しておきます。オプションの trigger を 'click' にすると、開発者ツールで確認しやすいです。

この場合は 29px になりますね。

1. スタイルを追加する

ツールチップを左にずらす場合をまず説明しておきます。

.clearfix::after {
	display: block;
	clear: both;
	content: "";
}
.tooltip {
	&.tooltip--shiftleft {
		width: 29px;
		@extend .clearfix;
		.tooltip-inner {
			float: right;
			white-space: nowrap;
		}
	}
}

（※Bootstrap に合わせて SCSS で書いています）
「tooltip--shiftleft」というクラスを追加し、width に下準備で確認したツールチップの「高さ」を設定します。
また、clearfix が適用されるようにしておきます。

「tooltip--shiftleft」にネストした「tooltip-inner」は float を「right」にして、white-space を「nowrap」で親のサイズを突き抜けて表示するようにします。

2. HTML タグを書く

<button class="btn btn-primary" type="button"
data-toggle="tooltip-shiftleft" data-placement="top"
title="左にずれたツールチップ">ツールチップ上</button>

data-toggle を通常の「tooltip」から任意の内容に変えておきます（ここでは「tooltip-shiftleft」）。また、placement は HTML タグに含めておきましょう。

3. JavaScript で tooltip を起動する

const tooltipShiftLeftOption = {
    template: '<div class="tooltip tooltip--shiftleft" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
};
const tooltip = new bootstrap.Tooltip(document.querySelector('[data-toggle="tooltip-shiftleft"]'), tooltipShiftLeftOption);

オプションの template で、スタイルに追加した「tooltip--shiftleft」クラスを追加します。
（className みたいなオプションで、簡単にクラス追加できるようにしてくれないかな……）

Bootstrap 4.x 以前の jQuery を使う書き方だとこうなります。

const tooltipShiftLeftOption = {
    template: '<div class="tooltip tooltip--shiftleft" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
};
const tooltip = $('[data-toggle="tooltip-shiftleft"]').tooltip(tooltipShiftLeftOption);

ということで、ツールチップをずらして表示することが可能になりました。
右にずらしたい場合は、クラスに「tooltip--shiftright」を同じように追加し、HTML タグ、JavaScript での起動も「left / right」を入れ替える形で記述します。

.tooltip {
	&.tooltip--shiftright {
		width: 29px;
		@extend .clearfix;
		.tooltip-inner {
			float: left;
			white-space: nowrap;
		}
	}
}

ちょっとした小技ですが、これで Bootstrap のツールチップがもっと使いやすくなりますね。