Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and Components using CSS3 for animations and data-bs-attributes for local title storage.

On this page

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="muted">
    Placeholder text to demonstrate some
    <b-a
      href="#"
      toggle="tooltip"
      title="Default tooltip"
    >
      inline links
    </b-a>
    with tooltips. This is now just filler, no killer. Content placed here
    just to mimic the presence of
    <b-a
      href="#"
      toggle="tooltip"
      title="Another tooltip"
    >
      real text
    </b-a>
    . 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
    <b-a
      href="#"
      toggle="tooltip"
      title="Another one here too"
    >
      these tooltips on links
    </b-a>
    can work in practice, once you use them on
    <b-a
      href="#"
      toggle="tooltip"
      title="The last tip!"
    >
      your own
    </b-a>
    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
    button="secondary"
    toggle="tooltip"
    placement="top"
    title="Tooltip on top"
  >
    Tooltip on top
  </b-button>
  <b-button
    button="secondary"
    toggle="tooltip"
    placement="right"
    title="Tooltip on right"
  >
    Tooltip on right
  </b-button>
  <b-button
    button="secondary"
    toggle="tooltip"
    placement="bottom"
    title="Tooltip on bottom"
  >
    Tooltip on bottom
  </b-button>
  <b-button
    button="secondary"
    toggle="tooltip"
    placement="left"
    title="Tooltip on left"
  >
    Tooltip on left
  </b-button>
  <!-- <b-button
    button="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
    href="#"
    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>
  <b-a
    href="#"
    toggle="tooltip"
    title="Some tooltip text!"
  >
    Hover over me
  </b-a>
</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
      button="primary"
      disabled
    >
      Disabled button
    </b-button>
  </b-span>
</template>