Bootstrap3 ポップオーバーとPopover.jsの簡単な使い方

Pocket

要素をクリックすることでヘルプメッセージなどを表示することができるポップオーバーコンポーネント。ツールチップとよく似てるので作るのは簡単ですが、Webアプリなどでは結構使えるコンテンツです。

Bootstrap3 Popoverの使い方

ポップオーバーはツールチップの兄弟のようなコンポーネント。作り方もツールチップとほぼ同じ。titleにポップオーバーのタイトルを、data-contentには内容を記述。タイトルはあってもなくてもOK。

ツールチップ同様、Javascriptを手動でセットしないと動かないので注意が必要です。

Class名 概要
data-toggle="popover" 要素をポップオーバーとして機能させる
data-placement="top" ポップオーバーの出てくる位置を決める、左右、上下の4つから選ぶ
title="ポップオーバーのタイトル" ポップオーバーのタイトルを書く
data-content="ポップオーバーの内容" ポップオーバーの内容を書く
<!-- ボタンでポップオーバー -->
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="タイトル" data-content="コンテンツ">Click to toggle popover</button>

<!-- テキストでポップオーバー -->
<a href="#" data-toggle="popover" title="タイトル" data-content="コンテンツ">ポップオーバーを開く</a>

<!-- アイコンにポップオーバー -->
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="タイトル" data-content="コンテンツ"></span>
// ポップオーバーを機能させるには自分でjavascript書く必要あり
$(function () {
  $('[data-toggle="popover"]').popover()
});

デモページはこちら

Popover.jsの使い方

Popoverのオプション

ポップオーバーはオプションを書き換えることで設定を変更することができます。

option名 概要
animation フェードアニメーションの可否
container ポップオーバーを特定の要素に追加
content ポップオーバーのコンテンツ
delay 表示の遅延を指定
html ポップオーバー内にHTMLを挿入、XSSに注意
placement ポップオーバーのポジションを指定
selector ポップオーバーを表示するセレクタ
template ポップオーバーのHTMLテンプレート
title デフォルトのタイトルをセット
trigger トリガーを設定
viewport ポップオーバーを表示できる要素を指定
// デフォルト設定
$('#myPopover').popover({
  animation: true,
  container: false,
  content: '',
  delay: 0,
  html: false,
  placement: 'right',
  selector: false,
  template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
  title: '',
  trigger: 'click',
  viewport: { selector: 'body', padding: 0 }
});

また、オプションはJavascriptだけでなくdata-属性としてHTML上に記述することもできます。

<!-- データ属性でオプション設定 -->
<p id="myPopover" data-toggle="popover" data-animation="true" data-content="コンテンツ">テキスト</p>

Popoverを操作するコマンド

Popover.jsではオプションの他にポップオーバーを操作するメソッドが用意されています。この機能を使うことで、表示・非表示を独自に作成したイベントに紐付けることができます。

function名 概要
.popover('show') ポップオーバーを表示
.popover('hide') ポップオーバーを隠す
.popover('toggle') ポップオーバーを表示したり閉じたりする
.popover('destroy') ポップオーバーを破壊する

また、各動作ごとにイベントハンドラも用意されています。動作の始まりや終わりで処理を追加したい時に使えます。

function名 概要
show.bs.popover ポップオーバーが呼び出されたら発動
shown.bs.popover ポップオーバーが表示されたら発動
hide.bs.popover hideメソッドが呼び出されたら発動
hidden.bs.popover ポップオーバーが隠れたら発動
inserted.bs.popover show.bs.popoverの後、テンプレートが挿入されたら発動
// ポップオーバーが表示されたら発動
$('#popover-hint').on('shown.bs.popover', function () {
  // ポップオーバー(ヒント)が表示されたら点数が減る
  var currentPoint = $('.tensuu').text();
  var newPoint = currentPoint - 10;
  $('.tensuu').text(newPoint);
});

デモページはこちら