bootstrap-vue でホバー時ヒント（ポップオーバー）を出す方法

BootstrapVue Popover

BootstrapVue は、公式ドキュメントがとても見やすいのでおすすめです。

当記事は、上記公式サイトの Components > Popover を参考にして作成しています。

v-b-popover ディレクティブを使う方法

この方法は、とても簡単で実装しやすいですが、細かな設定ができません。

<button
  class="popover"
  v-b-popover.hover="'こんにちは～\nこんばんはー'"
  title="ポップオーバーテスト"
>
  ここにマウスを載せてみよう！
</button>

v-b-popover.hover="'テキスト'" で、ポップオーバーテキストを設定します。上記の例では button タグを使用していますが、その他の要素でも動作します。

また上記だと、.hover によって、ホバーイベントにバインドさせていますが、.click や .focus なども使うことができます。

title="タイトル名" を指定することで、ポップオーバーで出てくる枠にタイトルを設定することもできます。

↓ で実際に動作を確認することができます。

See the Pen toragra/190617/bootstrap-vue-popover-1 by TigRig (@TigRig) on CodePen.

b-popover コンポーネントを使用する方法

この方法では、コードの量は増えますが、細かな設定をすることができます。

<button id="popover" class="popover">ここにマウスを載せてみよう！</button>
<b-popover
  title="ポップオーバーテスト"
  content="こんにちは～\nこんばんはー"
  target="popover"
  triggers="hover focus"
  placement="bottomleft"
  boundary="viewport"
/>

まず、ポップオーバーを設定したい要素に ID を指定します。

続いて、b-popover 要素（コンポーネント）を追加し、target 属性に先程の ID を指定します。 その他設定属性を記述すれば、自由な形式のポップオーバーを実装できます。

See the Pen toragra/190617/bootstrap-vue-popover-2 by TigRig (@TigRig) on CodePen.

b-popover のオプション一覧

※公式サイト の記載を和訳したものです。