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
改良版はコメント外すと動きます。