【今すぐ試せる】Bootstrap Popoverをホバーで表示する方法3選！jQuery、Bootstrap 5、CSSも紹介

2024-06-28

Bootstrap Popover をホバーで表示/非表示にする方法

必要なもの

jQuery
Bootstrap

手順

Popover のトリガー属性を hover に設定します。

<a href="#" data-toggle="popover" data-trigger="hover" title="My Popover">Hover me</a>

JavaScript で、popover イベントハンドラーを初期化します。

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

このコードは、data-toggle="popover" 属性を持つすべての要素に対して Popover を初期化します。

詳細

data-trigger="hover" 属性は、Popover をホバー時に表示/非表示を切り替えることを示します。
popover() メソッドは、Popover を初期化します。

その他のオプション

placement 属性を使用して、Popover の配置を変更できます。
template 属性を使用して、Popover の HTML テンプレートをカスタマイズできます。

補足

上記のコードは、Bootstrap 4 と jQuery 3 を使用しています。
Bootstrap 5 を使用している場合は、data-bs-toggle="popover" と data-bs-trigger="hover" 属性を使用する必要があります。

Bootstrap Popover をホバーで表示/非表示にする：サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Popover Hover Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Popover タイトル" data-content="Popover の内容です。">ホバーで表示</button>
  </div>

  <script>
    $(function() {
      $('[data-toggle="popover"]').popover();
    });
  </script>
</body>
</html>

説明

HTML コードで、data-toggle="popover" と data-trigger="hover" 属性を持つボタンを作成します。
title 属性には、Popover のタイトルを設定します。
JavaScript コードで、popover() メソッドを使用して Popover を初期化します。

このコードを実行すると、ボタンの上にマウスカーソルを置くと、Popover が表示されます。Popover からマウスカーソルを外すと、Popover が非表示になります。

配置を変更する

<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Popover タイトル" data-content="Popover の内容です。" data-placement="top">上</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Popover タイトル" data-content="Popover の内容です。" data-placement="right">右</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Popover タイトル" data-content="Popover の内容です。" data-placement="bottom">下</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Popover タイトル" data-content="Popover の内容です。" data-placement="left">左</button>

カスタム HTML を使用する

<script>
  $(function() {
    $('[data-toggle="popover"]').popover({
      template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
    });
  });
</script>

この例では、Popover のヘッダーと本文を囲むカスタム div を作成しています。

これらの例を参考に、自分のニーズに合わせて Bootstrap Popover をカスタマイズしてみてください。

Bootstrap Popover をホバーで表示/非表示にする：その他の方法

Bootstrap 5 では、data-bs-toggle="popover" と data-bs-trigger="hover" 属性を使用して、Popover をホバーで表示/非表示にすることができます。これは、JavaScript コードが不要で、より簡潔な方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Popover Hover Example</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="hover" title="Popover タイトル" data-bs-content="Popover の内容です。">ホバーで表示</button>
  </div>
</body>
</html>

jQuery UI Popover を使用して、Popover をホバーで表示/非表示にすることもできます。jQuery UI Popover は、Bootstrap Popover よりも多くの機能とオプションを提供しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Popover Hover Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
</head>
<body>
  <div class="container">
    <span id="hover-popover">ホバーで表示</span>
  </div>

  <script>
    $(function() {
      $( "#hover-popover" ).popover({
        trigger: "hover"
      });
    });
  </script>
</body>
</html>

カスタム JavaScript を使用する

完全にカスタマイズ可能な Popover を作成するには、カスタム JavaScript を使用することができます。この方法は、より高度な制御が必要な場合に適しています。

JavaScript

$(function() {
  $('.popover-trigger').on('mouseenter', function() {
    $(this).popover('show');
  }).on('mouseleave', function() {
    $(this).popover('hide');
  });
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Custom JavaScript Popover Hover Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]6.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="container">
    <a href="#" class="popover-trigger" title="Popover タイトル" data-content="Popover の内容です。">ホバーで表示</a>
  </div>
</body>
</html>