HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The Tooltip is a small pop-up box that appears when the user moves the mouse pointer over an element
The Tooltip is a 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.
The data-toggle="tooltip"
activates the tooltip.
The title
attribute specifies the text that should be displayed
inside the tooltip.
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Tooltips are not CSS-only plugins, and must therefore be initialized with
jQuery: select the specified element and call the tooltip()
method.
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
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
|
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:
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:
|
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:
|
Try it |
offset | number or a string | 0 | Offset of the tooltip relative to its target | |
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 |
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("dispose") | Hides and destroys the tooltip | Try it |
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 |