ツールチップ

Overview

長さゼロのタイトルを持つツールチップは表示されません。
隠された要素で tooltips をトリガーすると機能しません。
複数行にまたがるハイパーリンクからトリガーされた場合、tooltips は中央に配置されます。この動作を避けるには、b-a コンポーネントに white-space: nowrap; を使用してください。
disabled 属性の tooltips は、ラッパー要素上でトリガされなければなりません。

すべて理解できましたか？では、いくつかの例でそれらがどのように機能するか見てみましょう。

Example: Enable tooltips everywhere

ページ上のすべてのツールチップを初期化する1つの方法は、toggle 属性で選択することです。

Examples

下のリンクにカーソルを合わせると、ツールチップが表示されます。

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text . And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project. test

vue

<template>
 <p class="body-secondary">
  Placeholder text to demonstrate some
  <Anchor
   to="/"
   toggle="tooltip"
   title="Default tooltip"
  >
   inline links
  </Anchor>
  with tooltips. This is now just filler, no killer. Content placed here
  just to mimic the presence of
  <Anchor
   to="/"
   toggle="tooltip"
   title="Another tooltip"
  >
   real text
  </Anchor>
  . And all that just to give you an idea of how tooltips would look when
  used in real-world situations. So hopefully you've now seen how
  <Anchor
   to="/"
   toggle="tooltip"
   title="Another one here too"
  >
   these tooltips on links
  </Anchor>
  can work in practice, once you use them on
  <Anchor
   to="/"
   toggle="tooltip"
   title="The last tip!"
  >
   your own
  </Anchor>
  site or project.
  <a title="Sample Test ">test</a>
 </p>
</template>

下のボタンにカーソルを合わせると、上、右、下、左の4つのツールチップの方向が表示されます。

vue

<template>
 <b-button
  color="secondary"
  toggle="tooltip"
  placement="top"
  title="Tooltip on top"
 >
  Tooltip on top
 </b-button>
 <b-button
  color="secondary"
  toggle="tooltip"
  placement="right"
  title="Tooltip on right"
 >
  Tooltip on right
 </b-button>
 <b-button
  color="secondary"
  toggle="tooltip"
  placement="bottom"
  title="Tooltip on bottom"
 >
  Tooltip on bottom
 </b-button>
 <b-button
  color="secondary"
  toggle="tooltip"
  placement="left"
  title="Tooltip on left"
 >
  Tooltip on left
 </b-button>
 <!-- <b-button
    color="secondary"
    toggle="tooltip"
    template="tooltipTemplate"
  >
    Tooltip with HTML
  </b-button>
  <Tooltip id="tooltipTemplate">
    <em>Tooltip</em>
    <u>with</u>
    <b>HTML</b>
  </Tooltip> -->
</template>

SVGの場合：

vue

<template>
 <a
  to="/"
  class="d-inline-block"
  toggle="tooltip"
  title="Default tooltip"
 >
  <svg
   xmlns="http://www.w3.org/2000/svg"
   width="50"
   height="50"
   viewBox="0 0 100 100"
  >
   <rect
    width="100%"
    height="100%"
    fill="#563d7c"
   />
   <circle
    cx="50"
    cy="50"
    r="30"
    fill="#007bff"
   />
  </svg>
 </a>
</template>

Markup

Tooltip に必要なマークアップは、 Tooltip を作成したいHTML要素の tooltip 属性と title だけです。

Tooltip のマークアップは単純ですが、位置を指定する必要があります(デフォルトではプラグインによって top に設定されています)。

Hover over me

vue

<template>
 <Anchor
  to="/"
  toggle="tooltip"
  title="Some tooltip text!"
 >
  Hover over me
 </Anchor>
</template>

Disabled elements

disabled 属性を持つ要素はインタラクティブではありません。

つまり、ユーザーはそれらにフォーカスしたり、ホバーしたり、クリックしたりしてツールチップ（またはポップオーバー）をトリガーすることはできません。

回避策としては、ラッパー b-div や b-span コンポーネントでツールチップをトリガーし、理想的には tabindex="0" でキーボードフォーカス可能にして、無効要素の pointer-events をオーバーライドします。

vue

<template>
 <b-span
  display="inline-block"
  toggle="tooltip"
  title="Disabled tooltip"
 >
  <b-button
   color="primary"
   disabled
  >
   Disabled button
  </b-button>
 </b-span>
</template>

Bootstrap

Browse docs