Bootstrapを活用しよう! [ Ⅺ. ポップオーバー]

皆さん、お疲れ様です。

今回は、Bootstrapの中でも
「ポップオーバー」
の活用方法をご紹介させて頂きます。

Bootstrapの活用 : ポップオーバー

Bootstrapの活用 : ポップオーバー

ポップオーバーとは??

==============================================

✫ 要素をクリックすることでヘルプメッセージなどを表示することができる

[ サンプルイメージ]

f:id:Varth-Connect:20191016011848p:plain

==============================================

ポップオーバーを作成してみる

● まずはシンプルなポップオーバーから作成してみましょう。
→ 結果は、先程紹介させて頂いたサンプルと同様のものになります。

[ コード ]

<!-- JavaScript  以下をheadタグ内に追加する-->

<script>

(function() {
    window.addEventListener("load", function () {
    $('[data-toggle="popover"]').popover();
    });
})();

</script>

<!--  HTML  -->

 <!-- クリックして、ポップオーバーを有効にする -->
 <!-- title = "タイトル名を指定" -->
 <!-- data-content="クリック時、ポップオーバーとして表示するメッセージを指定"-->
 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="タイトル名" data-content="表示メッセージ" style="margin:15px 15px">テスト</button>

上下左右にポップオーバーを表示させる

● ポップオーバーといえど必ずしも右側に表示させるとは限りません。そこで上下左右、至る方向にでもポップオーバーを表示させる方法をみていきましょう。

[ コード ]

<!-- ※ JavaScriptは先程と同様で大丈夫です。-->
<!--  HTML  -->

<!-- 上に表示 -->
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="上部に表示" style="margin-top:100px;">
       上に表示
</button>
<!-- 下に表示 -->
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="下部に表示" style="margin-top:100px;">
       下に表示
</button>
<!-- 左に表示 -->
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="左に表示" style="margin-top:100px; margin-left: 150px;">
       左に表示
</button>
<!-- 右に表示 -->
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="右に表示" style="margin-top:100px;">
       右に表示
</button>

　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

f:id:Varth-Connect:20191016014340p:plain

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ボタン以外をクリックした時もメッセージを非表示にする

● これまでのポップオーバーは、ボタンクリック時に表示し、ボタンを再度クリックすると消えました。今度は、ボタン以外の箇所を再クリックした際もポップオーバー表示が消えるようにしていきましょう。

[ コード ]

<!-- JavaScript  以下をheadタグ内に追加する-->

<script>

(function() {
    window.addEventListener("load", function () {
    $('[data-toggle="popover"]').popover();
    });
})();

<!-- 追加 -->
$('.popover-dismiss').popover({
      trigger: 'focus'
})

</script>

<!-- HTML -->

<!-- ボタン以外をクリック時もメッセージを消せるようにする -->
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="タイトル名" data-content="テストです" style="margin:70px 30px;">別場所をクリック時も表示メッセージを消す</a>

　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

f:id:Varth-Connect:20191016021755p:plain

　　↓

f:id:Varth-Connect:20191016021250p:plain

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ポップオーバーを無効にする

● こちらはWebページ制作そのもので使うイメージがつかないかと思います。
あくまで、無効 / 有効を使い分けることで状況にに応じたポップオーバー表示を実施できるため、後々役に立つ箇所にはなる可能性は考えられますね!!
以下の例のように記述して頂きますと無効化が可能です。

[ コード ]

<!-- 無効にする : disabled -->
<!-- ① <span class="d-inline-block" data-toggle="popover" data-content="無効なポップオーバー">-->
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>無効ボタン</button>
<!-- ② </span>-->

　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

f:id:Varth-Connect:20191016024533p:plain

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

その他のオプションを使って、ポップオーバーをアレンジ!!

● 上記の方法以外にも様々なオプションが準備されています。今回はその中で一部、ご紹介させて頂ければと思います。

✫ 表示の際にフェード(アニメーション)を適用

[ コード ]

<!-- オプションの使用 : 表示の際にフェードを適用<data-animation="true">-->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-animation="true" data-content="表示メッセージ" style="margin:30px 30px">フェードを適用</button>

✫ ポップオーバーの表示および非表示を遅延する時間を設定

[ コード ]

<!-- 表示のみ -->

<!-- オプションの使用 : ポップオーバーの表示および非表示を遅延する時間を設定<data-delay="秒数">-->
<!-- 表示 : 2秒後 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-delay="2000" data-content="表示メッセージ" style="margin:30px">2秒後に表示</button>

<!-- 表示 / 非表示 -->

<!-- オプションの使用 : ポップオーバーの表示および非表示を遅延する時間を設定<delay: {show: 3000, hide: 3000}>-->
<!-- show : 表示(3秒), hide : 非表示(3秒) -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-delay='{"show":3000, "hide":3000}' data-content="表示メッセージ" style="margin:30px">表示 / 非表示の時間を設定</button>

✫ クリック以外の方法でポップオーバー表示させる

[ コード ]

<!-- オプションの使用 : カーソルをあてるとポップオーバー表示させる : data-trigger="hover"-->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-trigger="hover" data-content="表示メッセージ"  style="margin:30px">カーソルをあてるとポップオーバー表示</button>

<!-- オプションの使用 : フォーム内でポップオーバー表示させる : data-trigger="focus"-->
<input type="text" class="form-control" placeholder="カーソルを合わせてください" data-toggle="popover" data-trigger="focus" data-content="表示メッセージ" style="margin:30px; width:300px;">