記事内に商品プロモーションを含む場合があります
今回はBootstrap4のポップオーバーコンポーネントについて解説していきます。
ポップオーバーはフォームなどに使用される
ポップオーバーはフォームの送信ボタンで、エラーで送信できないときに表示されるときに使用されます。
単に表示されるだけのものだと気がつかないので、ポップオーバーを使用すると、より目立たせることができてユーザーに知らせることが可能になります。
では早速、確認していきましょう。
ポップオーバーの記述方法
ポップオーバーの記述方法は、まずHTMLを記述します。
公式サイトにあるソースをそのままコピペします。
ポップオーバー
- <div class=”container”>
- <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>
- </div>
※<div class=”container”>を追加しています。
スターターテンプレートをコピーしているし、jsも読み込ませているので、これでポップオーバーしてくれるだろうと表示を確認し、クリックしてみます。
ボタンは表示されているが
クリックするも・・・あれ？
・・・・・・
光るだけで、ポップアップが出てこない・・・・。
ポップオーバーが制御されている
これはなぜかと言うと、このポップオーバーが、変な動きをしないよう制御しているためです。
そこで、動作の対象とするscriptタグを追加で記述します。
スクリプトタグを追記する
下記のスクリプトタグをbodyタグの閉じタグ直前に記述しましょう。
スクリプトタグの追記
- <script>
- $(function () {
- $(‘[data-toggle=”popover“]’).popover()
- })
- </script>
これは、先ほど記述した以下のソースのうち
- <div class=”container”>
- <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>
- </div>
data-toggle="popover"を対象にpopoverを実行しますよ
という命令のjsの記述です。
※HTMLサイドで言えば、拡張属性といいます
では、改めて、動作を確認すると・・・
スクリプトを追記してボタンをクリックすると・・・
無事に表示無事に表示されました。
文言を変えることも可能
今は英語で文言が表示されていますが、これを変更することも可能です。
では、どこで変更するのかと言うと、こちらですね。
見て分かる通り、赤文字のところに帰属しています。
ポップオーバーの文言変更
- <div class=”container”>
- <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>
- </div>
したがって、赤文字の文言を変更すると、ポップオーバーの文言も変わります。
文言が変更されている文言が変更されていることが確認できます。
使用する際の注意点
先ほどもお伝えしていますが、ポップオーバーに関しては、ただHTMLをコピペするだけでなく、スクリプトタグを追記する必要があります。
このスクリプトタグを忘れると、ポップオーバーが機能してくれないので注意してください。
まとめ
Bootstrap4のポップオーバーコンポーネントについて解説しました。
ポップオーバーの使用方法は次の通りでした。
■HTMLを記述 ■スクリプトタグを記述 ■文言を変える
HTMLを記述するのはこれまで通りですが、スクリプトタグを追記しないと動作しないので、注意してください（3回目）
