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

Tweet

Pocket

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

Bootstrap3 Popoverの使い方

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

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

<!-- ボタンでポップオーバー -->
<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のオプション

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

// デフォルト設定
$('#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ではオプションの他にポップオーバーを操作するメソッドが用意されています。この機能を使うことで、表示・非表示を独自に作成したイベントに紐付けることができます。

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

// ポップオーバーが表示されたら発動
$('#popover-hint').on('shown.bs.popover', function () {
  // ポップオーバー（ヒント）が表示されたら点数が減る
  var currentPoint = $('.tensuu').text();
  var newPoint = currentPoint - 10;
  $('.tensuu').text(newPoint);
});

デモページはこちら