Tooltips

Tooltips can be used to display text labels that pop up when the user hovers, focuses on, or touches an element. They can be created by adding the data-toggle="tooltip" and data-title="..." attributes to an element, and requires no JavaScript.

<button class="btn" data-toggle="tooltip" data-title="Default tooltip" type="button">
  Default
</button>
<button class="btn" data-toggle="tooltip" data-title="Top tooltip" data-placement="top" type="button">
  Top
</button>
<button class="btn" data-toggle="tooltip" data-title="Right tooltip" data-placement="right" type="button">
  Right
</button>
<button class="btn" data-toggle="tooltip" data-title="Bottom tooltip" data-placement="bottom" type="button">
  Bottom
</button>
<button class="btn" data-toggle="tooltip" data-title="Left tooltip" data-placement="left" type="button">
  Left
</button>

The data-placement attribute can be set to top, bottom, left, or right to change the placement of the tooltip. If it is not set, the tooltip will pop up on top by default.

The data-title attribute is used instead of the title attribute (like in Bootstrap) because the title attribute pops up as the browser's default tooltip, which is impossible to disable without using JavaScript.

Specifying target screens #

By default, tooltips will pop up on hover and focus on all devices. However, they can be configured to target only certain screen sizes. For example:

  • The data-target-breakpoint="md" attribute will make the tooltips appear only on screen sizes where width > 768px.
  • The data-target-breakpoint="lg" attribute will make the tooltips appear only on screen sizes where width > 992px.
<!-- Tooltip will pop up on all screens -->
<button class="btn" data-toggle="tooltip" data-title="Show on all screens" type="button">
  Default
</button>

<!-- Tooltip will pop up only on screens with widths > 768px -->
<button class="btn" data-toggle="tooltip" data-target-breakpoint="md" data-title="Show only on screens with widths > 768px" type="button">
  &gt; 768px
</button>

<!-- Tooltip will pop up only on screens with widths > 992px -->
<button class="btn" data-toggle="tooltip" data-target-breakpoint="lg" data-title="Show only on screens with widths > 992px" type="button">
  &gt; 992px
</button>

Notes on usage #

Ideally, tooltips should be added to HTML elements that are traditionally keyboard-focusable and interactive. This will make the tooltips work for keyboard and assistive technology users.

Since the tooltips are created using the :before and :after attributes, they will not work properly on elements where the pseudo-elements have been overridden. The only notable examples that should be kept in mind are the following:

  • <label> elements with the class .required.
  • <label> elements for checkboxes, radios, switches, and file inputs.

Moreover, they will also not work on self-closing elements such <img>, <input>, and <hr>. This should not be too much of an issue however, because tooltips should be added to HTML elements that are traditionally keyboard-focusable and interactive, as mentioned above.

Drawbacks and limitations #

Tooltips are pretty limited in scope as they have a fixed width, and only support static text. For this reason, they should be only used when displaying short popup messages to users.

If you want something more robust, we highly recommend our dropdown component (opens in new tab), which supports arrows, four directions of content placement (down, up, left, right), toggle on hover, and all types of content.

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.