ツールチップ | ディレクティブ

任意の要素にカスタムBootstrapVueツールチップを追加します。ツールチップは、要素にホバー、フォーカス、またはクリックすることで表示できます。

概要

ツールチップを表示したい任意の要素またはコンポーネントにv-b-tooltipディレクティブを使用します。

<div class="text-center my-3">
  <b-button v-b-tooltip.hover title="Tooltip content">Hover Me</b-button>
</div>

<!-- b-tooltip.vue -->

ツールチップディレクティブを使用する際の注意点

ツールチップは、配置のためにサードパーティライブラリPopper.jsに依存しています。
ツールチップは、正しく機能し、バリエーションを表示するために、BootstrapVueのカスタムSCSS/CSSが必要です。
タイトルが指定されていない場合（または空文字列の場合）、ツールチップは表示されません。
複雑なコンポーネント（入力グループ、ボタングループなど）でのレンダリングの問題を回避するために、container: 'body'（デフォルト）を指定します。
非表示の要素に対するツールチップのトリガーは機能しません。
disabled属性を持つ要素のツールチップは、ラッパー要素でトリガーする必要があります。
複数行にまたがるハイパーリンクからトリガーされた場合、ツールチップは中央に配置されます。この動作を回避するには、<a>、<b-link>、および<router-link>にwhite-space: nowrap;を使用してください。
対応する要素がDOMから削除される前に、ツールチップを非表示にする必要があります。

配置

配置には、top、topleft、topright、right、righttop、rightbottom、bottom、bottomleft、bottomright、left、lefttop、leftbottomの12個のオプションがあります。デフォルトの位置はtopです。配置はトリガー要素を基準として行われます。

ライブ例

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

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

トリガー

ツールチップは、click、hover、focusの任意の組み合わせでトリガー（開閉）できます。デフォルトのトリガーはhover focusです。または、プログラムでのみ開閉できるmanualトリガーを指定することもできます。

ツールチップに複数のトリガーがある場合、ツールチップを閉じるには、すべてのトリガーをクリアする必要があります。つまり、ツールチップのトリガーがfocus clickで、focusで開かれた場合、ユーザーはツールチップを閉じるために、トリガー要素をもう一度クリックし**、かつ**フォーカスを移動する必要があります。

<div>
  <b-container>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip="'Tooltip!'" variant="outline-success">Hover + Focus</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover="'Tooltip!'" variant="outline-success">Hover</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.click="'Tooltip!'" variant="outline-success">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.focus="'Tooltip!'" variant="outline-success">Focus</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

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

キーボードと支援技術ユーザーのためのツールチップの使用方法

ツールチップは、伝統的にキーボードでフォーカス可能でインタラクティブなHTML要素（リンク、ボタン、またはフォームコントロールなど）にのみ追加する必要があります。tabindex="0"属性を追加することで、任意のHTML要素（<span>など）をフォーカス可能にすることができますが、これにより、キーボードユーザーにとって不要で混乱を招くタブストップが非インタラクティブな要素に追加されます。さらに、現在のほとんどの支援技術では、この状況ではツールチップはアナウンスされません。

また、ツールチップのトリガーとしてhoverのみに依存しないでください。これは、ツールチップをキーボードのみのユーザーがトリガー不可能にします。

無効な要素

disabled属性を持つ要素はインタラクティブではないため、ユーザーはツールチップ（またはポップオーバー）をトリガーするためにフォーカス、ホバー、またはクリックできません。回避策として、tabindex="0"を使用してキーボードでフォーカス可能にし、無効な要素のpointer-eventsをオーバーライドするラッパー<div>または<span>からツールチップをトリガーすることをお勧めします。

<div>
  <span class="d-inline-block" tabindex="0" v-b-tooltip.top title="Disabled tooltip">
    <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
  </span>
</div>

<!-- disabled-trigger-element.vue -->

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

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

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

<b-button
  href="#"
  tabindex="0"
  v-b-tooltip.focus
  title="Tooltip title"
>
  Link button with tooltip directive
</b-button>

次のクリックで閉じます

要素をクリックしたときのみ開くが、ドキュメント内の他の場所でクリックまたはフォーカスされたときに閉じられるツールチップが必要な場合は、clickとblurの両方を使用します。

この機能を動作させるには、要素がドキュメントのタブシーケンス内にある**必要**があります。要素がタブ可能でない場合は、要素にtabindex="0"属性を追加します。

タイトルコンテンツ

ツールチップのタイトルを提供するには、いくつかのオプションがあります。

デフォルトでは、ツールチップは要素のtitle属性をツールチップコンテンツとして使用します。タイトルは、次の形式でv-b-tooltipにオブジェクトとして渡すこともできます。

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

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

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

タイトルは関数参照にすることもでき、これはツールチップが開かれるたびに呼び出されます。開いている間に関数によって返されるタイトルを反応させるには、コンテンツが変更されるたびにタイトルを新しい関数参照に設定します。

<template>
  <b-container>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover :title="'Tip from title attribute ' + date" variant="success">Title</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover="'String Tip'" variant="success">String</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.html="tipData" variant="success">Data</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-tooltip.hover.html="tipMethod" variant="success">Method</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        tipData: { title: 'Tooltip <em>Message</em>' },
        date: new Date(),
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      tipMethod() {
        // Note this is called each time the tooltip is first opened.
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>

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

バリエーションとカスタムクラス

BootstrapVueのツールチップは、ディレクティブ修飾子または設定オプションを使用して、カスタムCSSを介してコンテキストカラーバリエーションをサポートしています。

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col>
        <b-button v-b-tooltip.hover.v-danger title="Danger variant">Danger Modifier</b-button>
      </b-col>
      <b-col>
        <b-button v-b-tooltip.hover="{ variant: 'info' }" title="Info variant">Info Config</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>
<!-- b-tooltip-variants.vue -->

Bootstrapのデフォルトテーマのバリエーションは、danger、warning、success、primary、secondary、info、light、darkです。BootstrapのSCSS変数を使用して、バリエーションを変更または追加できます。

customClassオプションプロパティを使用して、ツールチップの外部ラッパー<div>にカスタムクラスを適用できます。

<b-button v-b-tooltip.hover="{ customClass: 'my-tooltip-class' }" title="Tooltip">Button</b-button>

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

<b-button v-b-tooltip:[container].[mod1].[mod2].[...].[modN]="<value>">Button</b-button>

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

ツールチップのマークアップを配置する要素ID（#を除く）です。
指定されていない場合、ツールチップはbodyに追加されます。トリガー要素がモーダル内にある場合、ツールチップはモーダルのコンテナに追加されます。

ここで、[modX]は（すべてオプションで）

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

<value> は（オプションで）次の値をとることができます。

ツールチップのタイトルを含む文字列。
ツールチップのタイトルを生成する関数参照（ツールチップをトリガーする DOM 要素への参照を1つの引数として受け取ります）。
ツールチップのより複雑な構成を含むオブジェクト。許容されるオブジェクトのプロパティについては、以下を参照してください。

オプション構成オブジェクトのプロパティ

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

使用方法

最も簡単な使用方法

v-b-tooltip="'This is a Tooltip!'"

または、ツールチップの内容には要素の title 属性を使用します。

v-b-tooltip title="This is a title Tooltip"

配置例

v-b-tooltip.bottom
v-b-tooltip.right

バリアント例

v-b-tooltip.v-primary => `primary` variant
v-b-tooltip.v-danger => `danger` variant

トリガー例

v-b-tooltip.hover => Hover only
v-b-tooltip.click => Click only
v-b-tooltip.hover.focus => Both hover and focus

組み合わせ

v-b-tooltip.hover.bottom => Show on hover and place at bottom
v-b-tooltip.bottom.hover => Same as above
v-b-tooltip.bottom.hover.v-danger => Same as above, but with variant

オブジェクト

v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"

$root イベントによるツールチップの非表示と表示

$root で bv::hide::tooltip イベントを発行することで、**開いているすべてのツールチップ**を閉じることができます。

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

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

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

**特定のツールチップ**を開くには、bv::show::tooltip $root イベントを発行する際に、トリガー要素の id、または（設定オブジェクトに指定されている場合）ツールチップの id を最初の引数として渡します。

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

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

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

ツールチップを表示するには、**トリガー要素**が DOM に存在し、表示されている状態である必要があることに注意してください。

$root イベントによるツールチップの無効化と有効化

$root で bv::disable::tooltip イベントを発行することで、**開いているすべてのツールチップ**を無効化できます。

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

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

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

**特定のツールチップ**を有効にするには、bv::enable::tooltip $root イベントを発行する際に、トリガー要素の id、または（設定オブジェクトに指定されている場合）ツールチップの id を最初の引数として渡します。

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

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

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

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

参照

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

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

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

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

例

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

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

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

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

例

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

概要

配置