Cirrus

Overview

Things to know when using the tooltip plugin:

• Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js](https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js) before Cirrus.js or use `cirrus.bundle.min.js` / `cirrus.bundle.js` which contains Popper.js in order for tooltips to work!
• If you're building our JavaScript from source, it [requires `util.js`](/docs/4.5/getting-started/javascript/#util).
• Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
• Tooltips with zero-length titles are never displayed.
• Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
• Triggering tooltips on hidden elements will not work.
• Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
• When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `a`s to avoid this behavior.
• Tooltips must be hidden before their corresponding elements have been removed from the DOM.
• Tooltips can be triggered thanks to an element inside a shadow DOM.

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 `data-toggle` attribute:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Examples

Hover over the links below to see tooltips:

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

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

And with custom HTML added:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</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)

$('#example').tooltip({ boundary: 'window' })

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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 `div` or `span`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.

$('#element').tooltip('toggle')

.tooltip('dispose')

Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.

$('#element').tooltip('dispose')

.tooltip('enable')

Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**

$('#element').tooltip('enable')

.tooltip('disable')

Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Toggles the ability for an element's tooltip to be shown or hidden.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Updates the position of an element's tooltip.

$('#element').tooltip('update')

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})