Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 JS Tooltip

JS Tooltip

A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over.

For a tutorial about tooltip, visit our Bootstrap 4 Tooltip Tutorial.


Initialize Via JavaScript

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip.

Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method:

Run code

Tooltip Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-animation="".

Name Type Default Description Example
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
Demo
container string, or the boolean false false Appends the tooltip to a specific element.
Example: container: 'body'
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
Demo
html boolean  false Specifies whether to accept HTML tags in the tooltip:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Demo
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
Demo
selector string, or the boolean false false Adds the tooltip to a specified selector
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
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
Demo
offset number or a string 0 Offset of the tooltip relative to its target Demo
fallbackPlacement string or an aray "flip" Specifies which position Popper wil use on fallback
boundary string or element "scrollParent" Overflow constraint boundary of the tooltip. Accepts the values "viewport", "window" or "scrollParent", or an HTML element

Tooltip Methods

The following table lists all available tooltip methods:

Method Description
$().tooltip(options) Activates the tooltip with an option. See options above for valid values
$().tooltip("toggle") Toggles the tooltip
$().tooltip("show") Shows the tooltip
$().tooltip("hide") Hides the tooltip
$().tooltip("update") Updates the position of an element’s tooltip
$().tooltip("dispose") Hides and destroys the tooltip

Tooltip Events

The following table lists all available tooltip events:

Event Description Example
show.bs.tooltip This event fires immediately when the show instance method is called. Demo
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). Demo
hide.bs.tooltip This event is fired immediately when the hide instance method has been called. Demo
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). Demo