Vue.js

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

BootstrapVue ホバー時ヒントを出す方法 - eyecatch

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="タイトル名" を指定することで、ポップオーバーで出てくる枠にタイトルを設定することもできます。

↓の『Run Pen』を押すと、実際に動作を確認することができます。
(コードを編集して右下の『Rerun』を押すことで、編集を反映させることもできます)

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

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

b-popover のオプション一覧

属性名デフォルト値説明
targetnullポップオーバーを実装する対象要素に設定したID。必須一意なID(文字列)
titlenullポップオーバーウィンドウのタイトル。文字列
contentnullポップオーバーの内容テキスト。文字列
placement'right'ポップオーバーの表示位置。対象要素の上下左右どの位置に表示させるかを指定します。auto,
top, bottom, left, right,
topleft, topright,
bottomleft, bottomright,
lefttop, leftbottom,
righttop, rightbottom
fallback-placement'flip'Auto-flip 設定時の反転方向?(すみません、公式サイトの英語を理解しきれませんでした)flip, clockwise,
counterclockwise
disabledfalseポップオーバーの表示/非表示を管理します。.sync修飾子との併用が推奨されています。true, false
triggers'click'ポップオーバー表示/消去のトリガーとなるハンドルを指定します。半角スペース区切りで複数指定できます。hover, focus, click
no-fadefalsetrue を設定すると、ポップオーバー表示時のフェードをオフにします(パッと表示されます)。true, false
delay0トリガーイベント発火後、ポップオーバーを表示するまでの遅延秒数(ミリ秒単位)を指定します。消去の際にも適応されます。
{ show: 100, hide: 400 } のように指定することで、表示/消去それぞれの遅延秒数を設定できます。
0以上の整数
offset0ポップオーバーの表示位置をずらします(単位 Pixel)。整数
containernull要素のIDを指定。ポップオーバー要素は、指定したID要素の小要素として Append (挿入)されます。null を指定した場合、また指定IDが見つからない場合は、<body>要素の配下に挿入されます(デフォルト)。一意なID
boundary'scrollParent'ポップオーバーウィンドウ表示エリア(ポップオーバーウィンドウは、このエリアに収まるように制約を受ける)を指定します。多くの場合、このオプションは指定せずとも正しく動作しますが、ポップオーバーを表示する空間が小さく正しい場所に表示されない場合などに指定します'scrollParent', 'viewport', 'window'、または各種HTML要素への参照
boundary-
padding
5ポップオーバーウィンドウ表示エリアの padding (内側余白)を指定します(単位 Pixel)。正の整数

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA