Static demo

Interactive demo

Hover over the buttons below to see their tooltips.

<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="top"title="Tooltip on top">
Tooltip on top
</button><buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="right"title="Tooltip on right">
Tooltip on right
</button><buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="bottom"title="Tooltip on bottom">
Tooltip on bottom
</button><buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="left"title="Tooltip on left">
Tooltip on left
</button>

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

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

Making tooltips work for keyboard and assistive technology users

You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as
<span>s) can be made focusable by adding the
tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.