Bootstrap

Bootstrapでポップオーバー（Popovers）を作る方法

2022年8月6日 by single コメントはまだありません

Bootstrapでポップオーバー（Popovers）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Popover demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>サンプル１：デフォルト</h4></div>
      <div>
        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ポップオーバータイトル" data-bs-content="ポップオーバーの内容">クリックで表示⇔非表示</button>
      </div>
      <script type="text/javascript">
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
          return new bootstrap.Popover(popoverTriggerEl)
        });
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル２：jQuery</h4></div>
      <div>
        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle2="popover" title="ポップオーバータイトル" data-bs-content="ポップオーバーの内容">クリックで表示⇔非表示</button>
      </div>
      <!-- jQueryを利用するのでjQueryを読み込む -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script type="text/javascript">
        window.addEventListener("load", function () {
          $('[data-bs-toggle2="popover"]').popover();
        });
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル３：表示位置</h4></div>
      <div>
        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="ポップオーバー（自動）">
          ポップオーバー表示（自動）
        </button>
        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="ポップオーバー（上部）">
          ポップオーバー表示（上部）
        </button>
        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="ポップオーバー（右側）">
          ポップオーバー表示（右側）
        </button>
        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="ポップオーバー（下部）">
          ポップオーバー表示（下部）
        </button>
        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="ポップオーバー（左側）">
          ポップオーバー表示（左側）
        </button>
      </div>
      <script type="text/javascript">
        window.addEventListener("load", function () {
          $('.btn-secondary').popover();
        });
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル４：トリガー</h4></div>
      <div>
        <a tabindex="0" id="myPopover1" class="btn btn-lg btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus " title="消せるポップオーバー" data-bs-content="フォーカスで表示、別オブジェクトにフォーカスを当てると、非表示">フォーカス(Focus)</a>
        <a tabindex="0" id="myPopover2" class="btn btn-lg btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="hover " title="消せるポップオーバー" data-bs-content="ホーバーすると表示⇔非表示になります">ホーバー(Hover)</a>
      </div>
      <script type="text/javascript">
        var popoveerFocus = new bootstrap.Popover("#myPopover1");
        var popoveerHover = new bootstrap.Popover("#myPopover2");
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル５：HTML</h4></div>
      <div>
        <button type="button"  id="myPopover3" class="btn btn-lg btn-danger" data-bs-html="true"  title="ポップオーバー<br />タイトル" data-bs-content="ポップオーバーの内容<br />HTMLタグも利用可能">クリックで表示⇔非表示</button>
      </div>
      <script type="text/javascript">
        var popoveerFocus = new bootstrap.Popover("#myPopover3");
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル６：無効化（Disabled）</h4></div>
      <div>
        <span id="myPopover4"  title="ポップオーバータイトル" data-bs-content="無効なのでボタンは押せません" data-bs-trigger="hover ">
          <button class='btn btn-warning' disabled>ボタン（無効化）</button>
        </span>
      </div>
      <script type="text/javascript">
        var popoveerFocus = new bootstrap.Popover("#myPopover4");
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル７：Javascript</h4></div>
      <div>
        <a  id="myPopover5" href='#'> 表示済みポップオーバー</a>
      </div>
      <script type="text/javascript">
        var options = {  
                title:'ポップオーバータイトル'
               ,content: 'ポップオーバー内容<br /><strong>HTMLタグ</strong>も利用可能'
               ,html:true
               ,placement:'left'
               ,delay :{ "show": 100, "hide": 500 }
               ,trigger:'manual'
              };
        var popoveerJvSrpt = new bootstrap.Popover("#myPopover5",options);
        popoveerJvSrpt.show();
      </script>
    </div><!-- row -->

  </div><!-- container -->
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

ポップオーバー実装

ポップオーバータイトル／内容設定
<button
 id="btnExample"
 type="button" 
 data-bs-toggle="popover"
 title="ポップオーバータイトル"
 data-bs-content="ポップオーバーの内容">
  ボタン
</button>

ポップオーバーを設定したいオブジェクトに「title」と「data-bs-content」を設定し、「title」にはポップオーバーのタイトルを、「data-bs-content」にはポップオーバーの内容を設定してください。

ポップオーバー初期化
Javascriptの場合

Popoverの初期化をしてください。

<script type="text/javascript">
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  });
</script>

対象エレメントを取得し、「new bootstrap.Popover)」を実行し、初期化すれば、ツールチップ設定完了です。

一つのエレメントに対して初期化する場合には、以下のようにシンプルな構文で構いません。

<script type="text/javascript">
  var popoveer = new bootstrap.Popover("#btnExample");
</script>
jQueryの場合

jQueryでも初期化できます。

<script type="text/javascript">
  window.addEventListener("load", function () {
    $('[data-bs-toggle="popover"]').popover();
  });
</script>

表示位置

オプションの「placement」または属性「data-bs-placement」を設定すれば、ポップオーバーの表示位置を設定できます。

top上部
right右側
bottom下部
left左側
auto表示位置自動調整

ポップオーバーの表示トリガー

オプションの「trigger」または属性「data-bs-trigger」を設定すれば、ポップオーバーの表示トリガーを変更できます。

trigger説明
clickクリックするたびにポップオーバーが表示／非表示する
focusフォーカスが当たったり、外れたりするたびにポップオーバーが表示／非表示する
hoverオブジェクトにポイントが乗ったり外れたりするたびに、ポップオーバーが表示／非表示する
manualポップオーバーを表示させたり、非表示させるには、Javascriptでコーディングしなければならない

HTMLタグ有効化

ポップオーバーのタイトルおよび内容にもHTMLタグを利用することもできます。

オプションの「html」または属性「data-bs-html」を設定し、値を『true』とすれば、HTMLタグが有効になります。

<button type="button" 
 data-bs-html="true" 
 title="ポップオーバー<br />タイトル"
 data-bs-content="ポップオーバーの内容<br />HTMLタグも利用可能"
>
  クリックで表示⇔非表示
</button>

無効化されたオブジェクトにポップオーバーを設定するには？

「disabled」が設定されていて、無効化されたオブジェクトには、ポップオーバーが設定できません。

そのため、無効化されたオブジェクトをspanタグでラップすることで、ポップオーバーが設定できません。

<span 
 title="ポップオーバータイトル"
 data-bs-content="無効なのでボタンは押せません"
 data-bs-trigger="hover ">
  <button  disabled>ボタン（無効化）</button>
</span>

Javascriptで設定する方法

属性ではなく、Javascriptでオプションを指定することでも、ポップオーバーのタイトルや内容を設定することもできます。

<a  id="myPopover5" href='#'> 表示済みポップオーバー</a>
<script type="text/javascript">
  var options = {  
          title:'ポップオーバータイトル'
         ,content: 'ポップオーバー内容<br /><strong>HTMLタグ</strong>も利用可能'
         ,html:true
         ,placement:'left'
         ,delay :{ "show": 100, "hide": 500 }
         ,trigger:'manual'
        };
  var popoveerJvSrpt = new bootstrap.Popover("#myPopover5",options);
  popoveerJvSrpt.show();
</script>

オプション

初期化時に指定するオプションについては、以下のレファレンスを参照してください。

ご参考

関連ページ