No.212

画面のどこかがクリックされたらpopoverを消したい

　Bootstrap3の便利なpopover機能。ほんの数ワード追加記述するだけでツールチップ的なウィンドウを表示してくれる便利な機能だ。ところが便利である反面、ちょっとカスタマイズが行いにくいのが玉に瑕。ちょっと変更したくても悪戦苦闘を繰り広げることになる。

　そんなカスタマイズ要望の中で自分的に一番多いのがpopoverのクローズ。標準だとpopoverのhideイベントを発生させるのが、popoverを発生させるのに使ったHTML要素だけなのだ（toggleする）。
　これを画面の任意の場所をクリックしても消えるようにして欲しいという要望は結構多い。

　というわけで実装方法をメモ。

Javascript

　下記のコードをpopoverのページに仕込めばOK。

$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});

　元ネタはこちら

stack overflow

　画面のどこかがクリックされたらpopoverを片っ端から探してhideしていくという荒っぽいコードだけど、個人的には好き。