要素をクリックすることでヘルプメッセージなどを表示することができるポップオーバーコンポーネント。ツールチップとよく似てるので作るのは簡単ですが、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);
});