Logo

Base Example

Initialize all tooltips on a page by adding their data-toggleattribute.

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Some amazing content!">
    Hover to toggle tooltip
</button>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Directions

Four options are available: top, right, bottom, and leftaligned.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="tooltip" data-placement="top" title="Example content">
    tooltip on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="tooltip" data-placement="right" title="Example content">
    tooltip on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Example content">
    tooltip on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="tooltip" data-placement="left" title="Example content">
    tooltip on left
</button>

Disabled Elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a tooltip.

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

Dark Theme

Use the data-theme="dark"to have tooltip with dark theme.

<button class="btn btn-lg btn-danger" data-toggle="tooltip" data-theme="dark" title="Dark theme">Dark theme</button>

Dismiss On Next Click

Use the focustrigger to dismiss tooltips on the user’s next click of a different element than the toggle element.

<a tabindex="0" class="btn btn-primary" role="button" data-toggle="tooltip" data-trigger="click" title="Dismissible tooltip">
    Dismissible tooltip
</a>

HTML Content

Insert any HTML into the tooltip.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-trigger="focus" data-html="true" title="And here's some amazing <span class='label label-inline font-weight-bold label-light-primary'>HTML</span> content. It's very <code>engaging</code>. Right?">
    Click me
</button>

Offset

Offset of the tooltip relative to its target. For more information refer to Tether's offset docs.

<button type="button" class="btn btn-primary mr-2" data-container="body" data-trigger="focus" data-offset="20px 20px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    Example 1
</button>
<button type="button" class="btn btn-success mr-2" data-container="body" data-trigger="focus" data-offset="-20px -20px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    Example 2
</button>
<button type="button" class="btn btn-danger" data-container="body" data-trigger="focus" data-offset="60px 0px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    Example 3
</button>

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo