【Bootstrapのコンポーネント】ポップオーバー(Popovers)に関して

今回はBootstrap4のポップオーバーコンポーネントについて解説していきます。

ポップオーバーはフォームなどに使用される

ポップオーバーはフォームの送信ボタンで、エラーで送信できないときに表示されるときに使用されます。

単に表示されるだけのものだと気がつかないので、ポップオーバーを使用すると、より目立たせることができてユーザーに知らせることが可能になります。

では早速、確認していきましょう。

ポップオーバーの記述方法

ポップオーバーの記述方法は、まずHTMLを記述します。

公式サイトにあるソースをそのままコピペします。
ポップオーバー

  1.   <div class=”container”>
  2.       <button type=”button” class=”btn btn-lg btn-danger” data-toggle=”popover” title=”Popover title” data-content=”And here’s some amazing content. It’s very engaging. Right?”>Click to toggle popover</button>
  3.     </div>

※<div class=”container”>を追加しています。

スターターテンプレートをコピーしているし、jsも読み込ませているので、これでポップオーバーしてくれるだろうと表示を確認し、クリックしてみます。

 

ボタンは表示されているが

クリックするも・・・

あれ?

・・・・・・

光るだけで、ポップアップが出てこない・・・・。

 

ポップオーバーが制御されている

これはなぜかと言うと、このポップオーバーが、変な動きをしないよう制御しているためです。

そこで、動作の対象とするscriptタグを追加で記述します。

スクリプトタグを追記する

下記のスクリプトタグをbodyタグの閉じタグ直前に記述しましょう。
スクリプトタグの追記

  1.     <script>
  2.       $(function () {
  3.         $(‘[data-toggle=”popover“]’).popover()
  4.       })
  5.     </script>

 

これは、先ほど記述した以下のソースのうち

  1.   <div class=”container”>
  2.       <button type=”button” class=”btn btn-lg btn-danger” data-toggle=”popover” title=”Popover title” data-content=”And here’s some amazing content. It’s very engaging. Right?”>Click to toggle popover</button>
  3.     </div>

 

data-toggle="popover"を対象にpopoverを実行しますよ

 

という命令のjsの記述です。
※HTMLサイドで言えば、拡張属性といいます

では、改めて、動作を確認すると・・・

スクリプトを追記してボタンをクリックすると・・・

無事に表示

無事に表示されました。

文言を変えることも可能

今は英語で文言が表示されていますが、これを変更することも可能です。

では、どこで変更するのかと言うと、こちらですね。

見て分かる通り、赤文字のところに帰属しています。
ポップオーバーの文言変更

  1.     <div class=”container”>
  2.       <button type=”button” class=”btn btn-lg btn-danger” data-toggle=”popover” title=”Popover title” data-content=”And here’s some amazing content. It’s very engaging. Right?“>Click to toggle popover</button>
  3.     </div>

 

したがって、赤文字の文言を変更すると、ポップオーバーの文言も変わります。

文言が変更されている

文言が変更されていることが確認できます。

使用する際の注意点

先ほどもお伝えしていますが、ポップオーバーに関しては、ただHTMLをコピペするだけでなく、スクリプトタグを追記する必要があります。

このスクリプトタグを忘れると、ポップオーバーが機能してくれないので注意してください。

まとめ

Bootstrap4のポップオーバーコンポーネントについて解説しました。

ポップオーバーの使用方法は次の通りでした。

■HTMLを記述

■スクリプトタグを記述

■文言を変える

 

HTMLを記述するのはこれまで通りですが、スクリプトタグを追記しないと動作しないので、注意してください(3回目)