BootstrapのTooltipをクリックされたときのみ表示する

クリップボードにコピーしたときにのみメッセージを表示したいと思い、BootstrapのTooltipで実装したのでそのメモです。

環境

Bootstrap 5のbootstrap.bundle.min.jsをCDNで読み込んでいます。

HTML

<button type="button" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="コピーしました" id="discord-copy">
  ボタン
</button>

JavaScript

const tooltipElement = document.getElementById("discord-copy")
const tooltip = new bootstrap.Tooltip(tooltipElement)
tooltip.disable()

tooltipElement.addEventListener("click", function() {
    tooltip.enable()
    navigator.clipboard.writeText("クリップビードにコピーしたいテキストをほげほげ");
    tooltip.show()
});

tooltipElement.addEventListener("hidden.bs.tooltip", ()=>{
    tooltip.disable()
});

ポイント

tooltipは事前に初期化しておきます。このとき同時にdisableで表示させないようにしておきます。

クリックされたときのみ、enableでTooltipを有効化してからshowで表示します。

hidden.bs.tooltipイベントをハンドルして、Tooltipが隠れたときに再びdisableします。

個人的なポイントは、このJSをbootstrap.bundle.min.jsを読み込んだあとに実行することですね。

Bootstrap読み込み前に<script>で埋め込んでいるせいでbootstrap is not definedで30分ほど困ってました。

他にはdata-bs-trigger="manual"やdata-bs-trigger="click"を設定してはいけません。

これを設定してしてしまうと、閉じる動作が面倒になります。manualを設定すると自分で閉じるタイミングも実装する必要があり、clickにするとツールチップがボタンを再びクリックするまで閉じなくなってしまいます。

デフォルト動作のままで追加処理を行ってあげることがいい感じになるコツです。

「manualに設定した上でホバーが外れたときに自動で閉じる」なんて実装でもいいと思いますが気が向いたら。

終わり

Bootstrap、JSやSCSSのほうまで弄りたいですね。