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

2017-02-23

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

Bootstrap3 Popoverの使い方

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

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

Class名	概要
`data-toggle="popover"`	要素をポップオーバーとして機能させる
`data-placement="top"`	ポップオーバーの出てくる位置を決める、左右、上下の４つから選ぶ
`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);
});

デモページはこちら