日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

Bootstrap - ポップオーバー：初級者向けガイド

こんにちは、ウェブ開発志望者さんたち！今日は、Bootstrapのポップオーバーの素晴らしい世界に飛び込みます。初めてでも心配しないでください；私は_years_の教室で使ってきた同じ忍耐強さで、ステップバイステップガイドします。このチュートリアルの終わりまでに、プロのようにポップオーバーを使えるようになるでしょう！

Bootstrap - Popovers

ポップオーバーとは？

まず、ポップオーバーとは何かを理解しましょう。本を読んでいると、単語の横に小さなアスタリスクが付いていることがあります。ページの下部を見ると、その単語に関する追加情報が見つかります。ウェブページ上でポップオーバーがするのは、基本的に同じです。ユーザーが要素とインタラクションする際に追加情報を提供します。

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

まず第一に、ポップオーバーを有効にする必要があります。本を読む前にライトを点けるようなものです。設定を行わないと使えません。

ポップオーバーを有効にするためには、BootstrapのJavaScriptとCSSファイルをHTMLドキュメントに含める必要があります。以下の手順に従ってください：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- ここにコンテンツを入力してください -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

このコードは、HTMLドキュメントの基本構造を設定し、BootstrapのCSSとJavaScriptファイルを含めます。下部のスクリプトは、ページ上のすべてのポップオーバーを初期化します。

ポップオーバーの作成

ステージを整えたので、初めてのポップオーバーを作成しましょう！ボタンにいくつかの属性を追加するだけです。

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ポップオーバーのタイトル" data-bs-content="そしてここに素晴らしいコンテンツがあります。とても魅力的です。どうですか？">ポップオーバーをトグルするクリック</button>

これを分解してみましょう：

  • class="btn btn-lg btn-danger": ボタンを大きくて赤くします。
  • data-bs-toggle="popover": この要素がポップオーバーをトリガーすることをBootstrapに伝えます。
  • title="ポップオーバーのタイトル": ポップオーバーのタイトルを設定します。
  • data-bs-content="...": ポップオーバーの主要内容です。

ポップオーバーの配置

家具を部屋に配置するように、ポップオーバーをさまざまな方法で配置できます。Bootstrapでは、要素の上、右、下、左にポップオーバーを配置できます。

<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>

data-bs-placement属性が、ボタンに関連するポップオーバーの表示位置を決定します。

カスタムポップオーバー

ポップオーバーに個人的なtouchを追加したいですか？独自のHTMLコンテンツでカスタマイズできます！

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>カスタムタイトル</h3>" data-bs-content="<b>太字</b>コンテンツ。<a href='#'>リンク</a>を含みます。">
カスタムHTMLポップオーバー
</button>

ここでは、data-bs-html="true"を設定して、ポップオーバーにHTMLを許可しています。タイトルとコンテンツにHTMLタグを使用できます！

非表示にしないポップオーバー

ユーザーが明示的に閉じるまでポップオーバーを表示させたい場合、非表示にしないポップオーバーが便利です。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="非表示にしないポップオーバー" data-bs-content="そしてここに素晴らしいコンテンツがあります。とても魅力的です。どうですか？">非表示にしないポップオーバー</a>

ここで重要なのはdata-bs-trigger="focus"です。これにより、ポップオーバーが他のページのどこかをクリックするまで開いたままになります。

ホバーでトリガーするポップオーバー

ユーザーが要素をホバーしたときにポップオーバーが表示されるようにしたい場合は、簡単です！

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="私をホバーしてポップオーバーをトリガー">
ホバーでトリガーするポップオーバー
</button>

data-bs-trigger="hover"属性により、ホバーでポップオーバーが表示されます。

無効な要素のポップオーバー

通常、無効な要素はユーザーインタラクションをトリガーしません。しかし、少しのトリックで無効な要素でもポップオーバーを動作させることができます！

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="無効なポップオーバー">
<button class="btn btn-primary" type="button" disabled>無効なボタン</button>
</span>

無効なボタンをラップする<span>がポップオーバーのトリガーを処理します。

オプション

Bootstrapは、ポップオーバーをカスタマイズするためのさまざまなオプションを提供しています。以下は一般的なオプションの表です：

オプション タイプ デフォルト 説明
animation boolean true ポップオーバーにCSS fadeトランジションを適用
container string | element | false false ポップオーバーを特定の要素に追加
content string | element | function '' data-bs-content属性が存在しない場合のデフォルトコンテンツ
delay number | object 0 ポップオーバーの表示と非表示の遅延（ミリ秒）
html boolean false ポップオーバーにHTMLを許可
placement string | function 'right' ポップオーバーの配置方法
selector string | false false セレクタが提供されている場合、ポップオーバーオブジェクトは指定されたターゲットに委譲されます
template string <div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div> ポップオーバーを作成する際に使用する基本HTML
title string | element | function '' title属性が存在しない場合のデフォルトタイトル
trigger string 'click' ポップオーバーのトリガー方法 - click | hover | focus | manual

これらのオプションを使用して、JavaScriptでポップオーバーを初期化します：

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

そして、それで終わりです！Bootstrapのポップオーバーをマスターしました。これを掌握する（そして他のコーディングコンセプトも）ための鍵は練習です。それで、これらの例を試してみて、組み合わせて、素晴らしいものを作成してください。お楽しみください！

Credits: Image by storyset

前のチュートリアル:
Bootstrap - プレースホルダー
次のチュートリアル:
Bootstrap - プログレスバー