ポップオーバー

Bootstrap v4 CSSを使用してスタイルとアニメーションを設定し、BootstrapVueポップオーバーをサイトの任意の要素に追加するためのドキュメントと例です。ポップオーバーは、要素をホバー、フォーカス、またはクリックすることでトリガーでき、コンテンツとタイトルの両方を含めることができます。ポップオーバーは、ツールチップを強力にしたものです。

概要

ポップオーバーを表示したい任意の要素またはコンポーネントで、v-b-popoverディレクティブを使用します。

<div class="text-center my-3">
  <b-button v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-button>
</div>

<!-- b-popover.vue -->

ポップオーバーディレクティブを使用する際の注意点

ポップオーバーは、位置決めのためにサードパーティライブラリPopper.jsに依存しています。
ポップオーバーは、正しく機能し、バリアントを使用するために、BootstrapVueのカスタムSCSS/CSSが必要です。
タイトルとコンテンツの両方が提供されていない場合（または空の文字列の場合）、ポップオーバーは表示されません。
より複雑なコンポーネント（入力グループ、ボタングループなど）でのレンダリングの問題を回避するために、container: 'body' (デフォルト) を指定します。
非表示の要素でポップオーバーをトリガーしても機能しません。
disabled要素のポップオーバーは、ラッパー要素でトリガーする必要があります。
複数行にまたがるハイパーリンクからトリガーすると、ポップオーバーが中央に配置されます。この動作を避けるには、<a>、<b-link>、または<router-link>で white-space: nowrap; を使用してください。
ポップオーバーをトリガーする要素は、ドキュメントのタブ順序に含まれている必要があります。必要な場合は、tabindex="0"を追加してください。

位置決め

位置決めには、top、topleft、topright、right、righttop、rightbottom、bottom、bottomleft、bottomright、left、lefttop、leftbottomの12個のオプションが利用可能です。位置決めは、トリガー要素を基準にします。

ライブ例

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.top="'Popover!'" variant="primary">Top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.right="'Popover!'" variant="primary">Right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.left="'Popover!'" variant="primary">Left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottom="'Popover!'" variant="primary">Bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.topright="'Popover!'" variant="primary">Top right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.topleft="'Popover!'" variant="primary">Top left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottomright="'Popover!'" variant="primary">Bottom right</b-button>
      </b-col>
       <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottomleft="'Popover!'" variant="primary">Bottom left</b-button>
      </b-col>
     <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.lefttop="'Popover!'" variant="primary">Left top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.leftbottom="'Popover!'" variant="primary">Left bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.righttop="'Popover!'" variant="primary">right top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.rightbottom="'Popover!'" variant="primary">right bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-positioning.vue -->

トリガー

ポップオーバーは、click、hover、およびfocusの任意の組み合わせでトリガー（開閉）できます。デフォルトのトリガーはclickです。または、manualのトリガーを指定することもできます。この場合、ポップオーバーはプログラムによってのみ開閉できます。

ポップオーバーに複数のトリガーがある場合、ポップオーバーが閉じる前にすべてのトリガーをクリアする必要があります。たとえば、ポップオーバーにトリガーfocus clickがあり、focusで開かれ、ユーザーがトリガー要素をクリックした場合、ポップオーバーを閉じるには、もう一度クリックして、フォーカスを移動する必要があります。

<div>
  <b-container fluid>
    <h5>Triggers</h5>
    <b-row class="text-center">
      <b-col md="6" class="py-3">
        <b-button v-b-popover="'Popover!'" variant="outline-success">Click (default)</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover="'Popover!'" variant="outline-success">Hover</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.focus="'Popover!'" variant="outline-success">Focus</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover.focus="'Popover!'" variant="outline-success">Hover + Focus</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-triggers.vue -->

キーボードと支援技術のユーザー向けにポップオーバーを機能させる

ポップオーバーは、従来キーボードでフォーカス可能でインタラクティブなHTML要素（リンク、ボタン、フォームコントロールなど）にのみ追加する必要があります。任意のHTML要素（<span>など）にtabindex="0"属性を追加してフォーカス可能にすることはできますが、キーボードユーザーにとっては、インタラクティブではない要素に迷惑で紛らわしいタブストップが追加される可能性があります。さらに、ほとんどの支援技術は現在、この状況でポップオーバーをアナウンスしません。

さらに、ポップオーバーのトリガーとしてhoverのみに頼らないでください。これにより、ポップオーバーはキーボードのみのユーザーにとってはトリガーできなくなります。

`<button>`要素での`focus`トリガーに関する注意点

focusトリガーのみを使用する場合の適切なクロスブラウザおよびクロスプラットフォームの動作については、<button>タグではなく、<a>タグをレンダリングする要素を使用する必要があり、tabindex="0"属性も含める必要があります。

以下は、ボタンのように見える<a>を生成します。

<b-button
  href="#"
  tabindex="0"
  v-b-popover.focus="'Popover content'"
  title="Popover title"
>
  Link button with popover directive
</b-button>

次のクリックで破棄（自己破棄）

ユーザーが行う次のクリックでポップオーバーを破棄するには、単独でfocusトリガーを使用します。focusは、focusとclickの両方でポップオーバーをアクティブにします（クリックすると、要素がページのタブ順序に含まれていると仮定してフォーカスを受け取るため）。

ただし、トリガーをclick blurとして指定できます。これにより、クリックのみでポップオーバーがアクティブになり、要素のクリック、または別の要素またはドキュメントの一部へのフォーカスの喪失によってポップオーバーが閉じられます。

このblurトリガーは、clickトリガーと組み合わせて使用する必要があります。

次の例は、click blurの使用例を示しています。ポップオーバーはボタンのクリックでのみ開き、ボタンのクリック、または他の場所のクリック（またはTabキーを押してフォーカスを変更）すると閉じます。この動作を自己破棄と呼ぶ人もいます。

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-dismiss-next-click.vue -->

見出しとコンテンツ

ポップオーバーのタイトルとコンテンツを提供するオプションはいくつかあります。

デフォルトでは、ポップオーバーは要素のtitle属性をポップオーバーの見出しとして使用し、コンテンツは文字列としてv-b-popoverディレクティブに渡されます。タイトルとコンテンツは、次のような形式でオブジェクトとしてv-b-popoverに渡すこともできます。

const options = {
  title: 'This is the title',
  content: 'This is the content'
}

コンテンツに基本的なHTMLマークアップがある場合は、htmlプロパティをtrueに設定するか、ディレクティブ修飾子htmlを使用する必要もあります。

// Object format with HTML:
const options = {
  title: 'This is the <strong>title</strong>',
  content: 'This is the <em>content<em>',
  html: true
}

タイトルとコンテンツは、ポップオーバーが開かれるたびに呼び出される関数参照にすることもできます。開いているときに、関数によって返される値をリアクティブにするには、コンテンツが変更されるたびに、タイトルまたはコンテンツを新しい関数参照に設定します。

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="'Content!'" title="Title from title attribute" variant="success">
          Title + Content
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button
          v-b-popover.hover="{title:'Popover', content:'This is the content of popover'}"
          variant="success"
        >
          Config Object
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="popoverData" variant="success">Config from data</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.html="popoverMethod" title="Popover with HTML" variant="success">
          Method
        </b-button>
      </b-col>
    </b-row>
    <b-row class="text-center">
      <b-col cols="12" class="py-3">
        <b-button v-b-popover.hover="popoverConfig" variant="success">Config Object</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date(),
        counter: 0,
        timer: null
      }
    },
    computed: {
      popoverConfig() {
        // Both title and content specified as a function in this example
        // and will be called the each time the popover is opened
        return {
          html: true,
          title: () => {
            // Note this is called only when the popover is opened
            return 'Hello <b>Popover:</b> ' + ++this.counter
          },
          content: () => {
            // Note this is called only when the popover is opened
            return 'The date is:<br><em>' + new Date() + '</em>'
          }
        }
      },
      popoverData() {
        return {
          title: 'Popover Title',
          content: 'The date is ' + this.date
        }
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      popoverMethod() {
        // Returns the content as a string
        // Will be called each time the popover is opened
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>

<!-- b-popover-content.vue -->

バリアントとカスタムクラス

BootstrapVueのポップオーバーは、ディレクティブ修飾子または構成オプションを使用することにより、カスタムCSSを介してコンテキストカラーバリアントをサポートします

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col>
        <b-button
          v-b-popover.hover.v-danger="{ content: 'Popover content' }"
          title="Danger variant"
        >
          Danger Modifier
        </b-button>
      </b-col>
      <b-col>
        <b-button
          v-b-popover.hover="{ variant: 'info',  content: 'Popover content' }"
          title="Info variant"
        >
          Info Config
        </b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<!-- b-popover-variants.vue -->

Bootstrapのデフォルトテーマのバリアントは、danger、warning、success、primary、secondary、info、light、およびdarkです。BootstrapSCSS変数を介して、追加のバリアントを変更または追加できます

カスタムクラスをポップオーバーの外側のラッパーに適用できます

customClassオプションプロパティを使用する

<b-button
  v-b-popover.hover="{ customClass: 'my-popover-class', content: 'Popover content' }"
  title="Popover"
>
  Button
</b-button>

ディレクティブの構文と使用法

<b-button v-b-popover:[container].[mod].[mod].[...].[mod]="<value>">Button</b-button>

ここで、[container]は（オプション）です

表示されているときにポップオーバーマークアップを配置する要素ID（#を除く）
指定がない場合、ポップオーバーは表示時に <body> に追加されます。

[mod] は（すべてオプションで）以下のようになります。

位置: top, bottom, left, right, auto; または、オフセット配置位置 topleft, topright, bottomleft, bottomright, lefttop, leftbottom, righttop, rightbottom （最後に検出されたものが優先され、デフォルトは right）。
イベントトリガー: click, hover, focus, blur （何も指定しない場合、デフォルトは click。blur トリガーはクローズハンドラーのみで、単独で指定された場合は focus に変換されます）。手動で表示を制御したい場合は manual を使用します。
アニメーションをオフにする場合は nofade。
生のHTMLのレンダリングを有効にするには html。デフォルトでは、HTMLはエスケープされテキストに変換されます。
遅延値は d### 形式（### はミリ秒単位、デフォルトは 50）、hide と show の両方に適用されます。
表示遅延値は ds### 形式（### はミリ秒単位、デフォルトは 50）、show トリガーのみに適用されます。
非表示遅延値は dh### 形式（### はミリ秒単位、デフォルトは 50）、hide トリガーのみに適用されます。
オフセット値はピクセル単位で o### 形式（### はピクセル数、デフォルトは 0。負の値も許可されます）。オフセットが指定されている場合、配置位置は top, bottom, left, または right のいずれかにフォールバックすることに注意してください。
境界設定は window または viewport。ポップオーバーの表示位置を制約する要素。指定しない場合、境界はデフォルトでトリガー要素のスクロール親になります（ほとんどの場合、これで十分です）。
コンテキストのバリアントは v-XXX 形式（XXX はカラーバリアント名）。

<value> は（オプションで）以下のようになります。

ポップオーバーのコンテンツを含む文字列
ポップオーバーのコンテンツを生成する関数リファレンス（ポップオーバーをトリガーするDOM要素への参照である1つの引数を受け取ります）
ポップオーバーのより複雑な構成を含むオブジェクト。利用可能なオプションについては、以下を参照してください。

オプション設定オブジェクトのプロパティ

プロパティ	タイプ	デフォルト	説明
`animation`	Boolean	`true`	ポップオーバーにCSSフェードトランジションを適用します。
`container`	String ID または HTMLElement または `false`	`false`	ポップオーバーを特定の要素に追加します。例: `container: '#body'`。このオプションは、特に、トリガー要素の近くのドキュメントフローに沿ってポップオーバーを配置できるため、ウィンドウのリサイズ中にポップオーバーがトリガー要素から離れて浮いてしまうのを防ぐのに役立ちます。`false` に設定すると、ポップオーバーは `body` に追加されます。または、トリガー要素がモーダル内にある場合は、モーダルのコンテナーに追加されます。
`delay`	数値またはオブジェクト	`50`	ポップオーバーの表示と非表示の遅延時間（ms）。数値が指定された場合、遅延は非表示/表示の両方に適用されます。オブジェクト構造は次のとおりです。`delay: { "show": 500, "hide": 100 }`
`html`	Boolean	`false`	ポップオーバーでのHTMLを許可します。trueの場合、ポップオーバーのタイトルとコンテンツのHTMLタグがツールチップにレンダリングされます。falseの場合、タイトルとコンテンツはプレーンテキストとして挿入されます。XSS攻撃が心配な場合は、テキストを使用してください。
`placement`	文字列または関数	`'top'`	ポップオーバーを配置する方法 - `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, または `rightbottom`。`auto` が指定されている場合、ツールチップは動的に方向を変更します。
`title`	文字列または関数	`''`	title属性が存在しない場合のデフォルトのタイトル値。関数が指定された場合は、文字列を返す必要があります。
`content`	文字列または関数	`''`	デフォルトのコンテンツ値。関数が指定された場合は、文字列を返す必要があります。
`trigger`	文字列	`'hover focus'`	ツールチップがトリガーされる方法：`click`, `hover`, `focus`。複数のトリガーを渡すことができ、スペースで区切ります。ツールチップをプログラムで表示および非表示にする場合にのみ、`'manual'` を指定してください。
`offset`	数値または文字列	`0`	ターゲットに対するポップオーバーのオフセット。詳細については、Popper.jsのオフセットドキュメントを参照してください。
`fallbackPlacement`	文字列または配列	`'flip'`	フォールバック時にPopperが使用する位置を指定できます。 `flip`、`clockwise`、`counterclockwise`、または配置の配列にすることができます。詳細については、Popper.jsの動作ドキュメントを参照してください。
`boundary`	文字列 ID または HTMLElement	`'scrollParent'`	ポップオーバーが視覚的に制約されるコンテナー。デフォルトはほとんどの場合十分ですが、ターゲット要素がオーバーフロースクロールのある小さなコンテナーにある場合は、これを変更する必要がある場合があります。サポートされている値：`'scrollParent'`（デフォルト）、`'viewport'`、`'window'`、またはHTML要素への参照。
`boundaryPadding`	数値	`5`	境界とポップオーバーの間の最小距離を定義するために使用されるピクセル数。これにより、ポップオーバーがコンテナーの端の間に常に少しのパディングを持つようになります。
`variant`	文字列	`null`	ポップオーバーのコンテキストカラーバリアント。
`customClass`	文字列	`null`	ポップオーバーの外側のラッパー要素に適用するカスタムクラス名。
`id`	文字列	`null`	ポップオーバーのルート要素で使用するID。何も指定しない場合は、自動的に生成されます。IDを指定する場合は、レンダリングされたページで一意であることが保証されている必要があります。
`disabled`	Boolean	`false`	ポップオーバーを無効にする場合は `true` に設定します。

使用法

最もシンプルな使用法

v-b-popover="'This is a Popover!'"

または、ポップオーバーヘッダーに要素の title 属性を使用します。

v-b-popover title="This is a popover header"
v-b-popover="'This is popover content'" title="This is popover header"

または、タイトルとコンテンツにオブジェクトを提供します。

v-b-popover="{title:'Popover header', content:'Popover content'}"

HTMLコンテンツ/タイトルを有効にする

v-b-popover.html="'<em>Emphasis</em> in content'" title="<strong>Bolded title</strong>"

配置の例

v-b-popover.top

トリガーの例

v-b-popover => Default of click
v-b-popover.hover => Hover only
v-b-popover.click => Click only
v-b-popover.hover.focus => Both hover and focus

組み合わせ

v-b-popover.hover.bottom => Show on hover and place at bottom
v-b-popover.bottom.hover => Same as above
v-b-popover.bottom.click.html => Show on click and place at bottom with HTML content

$rootイベントを介したポップオーバーの非表示と表示

$rootで bv::hide::popover イベントを発行することにより、開いているすべてのポップオーバーを閉じ（非表示に）できます。

this.$root.$emit('bv::hide::popover')

特定のポップオーバーを閉じるには、トリガー要素の id、またはポップオーバーの id（構成オブジェクトで指定されている場合）を最初の引数として渡します。

this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')

特定のポップオーバーを開くには、bv::show::popover イベントを発行するときに、トリガー要素の id、またはポップオーバーの id（構成オブジェクトで指定されている場合）を最初の引数として渡します。

this.$root.$emit('bv::show::popover', 'my-trigger-button-id')

すべてのポップオーバーを同時に開くには、bv::show::popover イベントを発行するときに id 引数を省略します。

これらのイベントは、ポップオーバーのコンポーネントバージョンとディレクティブバージョンの両方で機能します。

ポップオーバーをインスタンス化して表示するには、トリガー要素がDOM内に存在し、表示可能な状態になっている必要があることに注意してください。

$rootイベントを介したポップオーバーの無効化と有効化

$rootで bv::disable::popover イベントを発行することにより、すべてのポップオーバーを無効にできます。

this.$root.$emit('bv::disable::popover')

特定のポップオーバーを無効にするには、トリガー要素の id、またはポップオーバーの id（構成オブジェクトで指定されている場合）を最初の引数として渡します。

this.$root.$emit('bv::disable::popover', 'my-trigger-button-id')

特定のポップオーバーを有効にするには、bv::enable::popover イベントを発行するときに、トリガー要素の id、またはポップオーバーの id（構成オブジェクトで指定されている場合）を最初の引数として渡します。

this.$root.$emit('bv::enable::popover', 'my-trigger-button-id')

すべてのポップオーバーを同時に有効にするには、bv::enable::popover イベントを発行するときに id 引数を省略します。

これらのイベントは、ポップオーバーのコンポーネントバージョンとディレクティブバージョンの両方で機能します。

ポップオーバーを有効または無効にするには、トリガー要素がDOMに存在する必要があることに注意してください。

こちらも参照

ディレクティブリファレンス

個別のディレクティブのインポート

次の名前付きエクスポートを介して、個別のディレクティブをプロジェクトにインポートできます

ディレクティブ	名前付きエクスポート	インポートパス
`v-b-popover`	`VBPopover`	`bootstrap-vue`

例

import { VBPopover } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-popover', VBPopover)

Vue.jsプラグインとしてインポートする

このプラグインには、上記にリストされた個々のディレクティブがすべて含まれています。

名前付きエクスポート	インポートパス
`VBPopoverPlugin`	`bootstrap-vue`

例

import { VBPopoverPlugin } from 'bootstrap-vue'
Vue.use(VBPopoverPlugin)

概要

位置決め