Tooltips

Overview

Tooltips with zero-length titles are never displayed.
Triggering tooltips on hidden elements will not work.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your s to avoid this behavior.
Tooltips for disabled attribute must be triggered on a wrapper element.

Got all that? Great, let's see how they work with some examples.

Example: Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their toggle attribute:

Examples

Hover over the links below to see tooltips:

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>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

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>

With an 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

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip.

The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

Hover over me

vue

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

Disabled elements

Elements with the disabled attribute aren't interactive,

meaning users cannot focus, hover, or click them to trigger a tooltip (or popover).

As a workaround, you'll want to trigger the tooltip from a wrapper b-div or b-span component, ideally made keyboard-focusable using tabindex="0".

vue

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