Latest web development tutorials
 

Bootstrap JS Tooltip

❮ Previous Next Reference ❯

JS Tooltip (tooltip.js)

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.

For a tutorial about Tooltips, read our Bootstrap Tooltip Tutorial.

Via data-* Attributes

The data-toggle="tooltip" activates the tooltip.

The title attribute specifies the text that should be displayed inside the tooltip.

Example

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Try it Yourself »

Via JavaScript

Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.

Example

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Try it Yourself »

Tooltip Options

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

Name Type Default Description Try it
animation boolean true

Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip

  • true - Add a fading effect
  • false - Do not add a fading effect
 Try it
container string, or the boolean false false Appends the tooltip to a specific element.
Example: container: 'body'		 Try it
delay number, or object 0 Specifies the number of milliseconds it will take to show and hide the tooltip.

To specify a delay for showing and another one for hiding, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it		 Try it
html boolean  false Specifies whether to accept HTML tags in the tooltip:
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).

When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks		 Try it
placement string "top" Specifies the tooltip position. Possible values:

  • "top" - Tooltip on top
  • "bottom" - Tooltip on bottom
  • "left" - Tooltip on left
  • "right" - Tooltip on right
  • "auto" - Lets the browser decide the position of the tooltip. For example, if the value is "auto left", the tooltip will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the tooltip will display at the bottom when possible, otherwise on the top
 Try it
selector string, or the boolean false false Adds the tooltip to a specified selector Try it
template string   Base HTML to use when creating the tooltip.

The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.
title string "" Specifies the text that should be displayed inside the tooltip Try it
trigger string "hover focus" Specifies how the tooltip is triggered. Possible values:

  • "click" - Trigger the tooltip with a click
  • "hover" - Trigger the tooltip on hover
  • "focus" - Trigger the tooltip when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the tooltip manually
Tip: To pass multiple values, separate them with a space		 Try it
viewport string, or object {selector: "body", padding: 0} Keeps the tooltip within the bounds of this element.

Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Tooltip Methods

The following table lists all available tooltip methods.

Method Description Try it
.tooltip(options) Activates the tooltip with an option. See options above for valid values Try it
.tooltip("show") Shows the tooltip Try it
.tooltip("hide") Hides the tooltip Try it
.tooltip("toggle") Toggles the tooltip Try it
.tooltip("destroy") Hides and destroys the tooltip Try it

Tooltip Events

The following table lists all available tooltip events.

Event Description Try it
show.bs.tooltip Occurs when the tooltip is about to be shown Try it
shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS transitions have completed) Try it
hide.bs.tooltip Occurs when the tooltip is about to be hidden Try it
hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS transitions have completed) Try it
Examples

Examples

Custom Tooltip Design

Use CSS to customize the look of the tooltip:

Example

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Try it Yourself »

❮ Previous Next Reference ❯