Bootstrap5のPopoversが微妙なので少し頑張った

bootstrap javascript

Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/

を使おうとしていたのですが、期待する動作にならずに少し困っていました。　

具体的には

data-bs-trigger というオプションが用意されていて、 click、hover、foucs 時にpopoverが発動するようになっています。

やりたいこと

  • リンクのhoverとclick時にpopoverを表示
  • popoverに表示された内容をコピペできる
  • popover以外をクリックするとpopoverを非表示にする

上記なのですが、デフォルトのoptionでは対応できないようでした。

問題点

hoverは欲しいので、これは入れる前提で、他のoptionを組み合わせてみると、以下の問題が発生していました。

data-bs-trigger 問題点
hover focus popoverをコピペしようとするとpopoverが消えてしまう
hover click popoverのコピペはできるけど、popoverを消すために、リンクを再度クリックしないといけない

対応方法

hover clickを採用しつつ、mouseup時のtargetの要素を見て、popoverの外側をクリックしていたらpopoverを消すという対応を入れました。

document.addEventListener("mouseup", (event) => {
  const popoverElm = document.getElementsByClassName("popover")[0]
  if (popoverElm) {
    const target = event.target
    const isPopoverInsideClicked = target.closest(".popover")
    if (!isPopoverInsideClicked) {
      bootstrap.Popover.getInstance(popoverElm).hide()
    }
  }
});

jsfiddle

改良版はコメント外すと動きます。