This tutorial explains all about Bootstrap 4 Tooltips. Learn to create Bootstrap Tooltip with HTML, usage and more:
In this tutorial, you will learn what a Bootstrap 4 tooltip is, how to create a Bootstrap tooltip, tooltips with HTML, tooltip positions, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples. Let us begin with the learning!!
=> Check Here To See A-Z Of Bootstrap Training Tutorials
Table of Contents:
Bootstrap Tooltip
The following table summarizes the attributes that we have used in this tutorial.
| Attribute | Usage |
|---|---|
| The data-toggle attribute | This attribute is used to create a tooltip. |
| The title attribute | This attribute is used to display tooltip text. |
| The data-placement attribute | This attribute is used to set the position of the tooltip. |
A Bootstrap tooltip is a tiny pop-up that appears when a user places the cursor over an element.
Create A Bootstrap 4 Tooltip
Add the data-toggle attribute and the title attribute to an element like a link or a button. The value of the title attribute should be the text that you want to display inside the tooltip.
Important – You need to add the 3rd party library called Popper.js in your project as it is required to work tooltips properly (for positioning).
The below programming code shows a basic example. You can try this example by running the below programming code.
Important – Tooltips must be initialized with jQuery as shown in the below example.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<a href="#" data-toggle="tool-tip" title="Yay!">Basic Tooltip</a><br>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tool-tip"]').tooltip();
});
</script>
</body>
</html>
Note: Place the cursor over the above link (hover) to see the tooltip.
The below screenshots show the browser output of the above programming code.
- Before hovering over the element:
- After hovering over the element:
Note: The default tooltip position is at the top of the element. Therefore, you need to keep enough space at the top of the element as shown in the above screenshots. Otherwise, the tooltip position will change, as shown in the below screenshot.
Bootstrap Tooltips With HTML
You can also use HTML inside the tooltip.
The below programming code shows an example. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary mt-4" data-toggle="tool-tip" data-
html="true" title="<b>This</b> <u>is</u> <i>HTML.</i>">
My Text
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tool-tip"]').tooltip();
});
</script>
</body>
</html>
Note: Place the cursor over the above button (hover) to see the tooltip.
The below screenshots show the browser output of the above programming code.
- Before hovering over the element:
- After hovering over the element:
Bootstrap Tooltip Positions
There are four tooltip positions, as shown in the below list. These positions specify the direction in which a tooltip appears.
- Top – Appears on top of the element. This is the default position.
- Bottom – Appears on the bottom of the element.
- Left – Appears on the left of the element.
- Right – Appears on the right of the element.
You need to add the data-placement attribute to set the position of the tooltip.
The below programming code shows a few examples. You can try these examples by running the below programming code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<button class="btn btn-danger mt-4" data-toggle="tool-tip" data-placement="top" title="Yay!">Top</button>
<button class="btn btn-warning mt-4" data-toggle="tool-tip" data-placement="bottom" title="Yay!">Bottom</button>
<button class="btn btn-success mt-4" data-toggle="tool-tip" data-placement="left" title="Yay!">Left</button>
<button class="btn btn-info mt-4" data-toggle="tool-tip" data-placement="right" title="Yay!">Right</button><br>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tool-tip"]').tooltip();
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Note: Place the cursor over the above buttons (hover) to see the four tooltip positions: top, bottom, left, and right. Also, don’t forget to keep enough space at the top of the elements.
Usage
#1) Options
There are two ways to pass options.
- Via data attributes
- Via JavaScript
The following table shows the available options:
| Name | Type | Default | Description | |
|---|---|---|---|---|
| 1 | animation | boolean | true | Specify whether to apply a CSS fade transition when opening and closing the tooltip. true - apply a CSS fade transition false - do not apply a CSS fade transition |
| 2 | container | string or element or false | false | Append the tooltip to a specific element. Example: container: 'body' |
| 3 | delay | number or object | 0 | The delay in ms, it will take to open and close the tooltip. It does not apply to the manual trigger type. |
| 4 | html | boolean | false | Specify whether to insert HTML in the tooltip true - insert HTML false - do not insert HTML |
| 5 | placement | string or function | 'top ' | The tooltip position. 1. auto - dynamically reorient the tooltip 2. top - tooltip appears on the top 3. bottom - tooltip appears on the bottom 4. left - tooltip appears on the left 5. right - tooltip appears on the right |
| 6 | selector | string or false | false | Add the tooltip to specified targets. |
| 7 | template | string | (the basic structure) | The basic HTML structure to use when creating the tooltip. |
| 8 | title | string or element or function | '' | The default value of the title if the title attribute is not present. |
| 9 | trigger | string | 'hover focus' | How tooltip is triggered. 1. click - trigger a tooltip using a click 2. hover - trigger a tooltip on hover 3. focus - trigger a tooltip when it gets focus 4. manual - trigger a tooltip manually |
| 10 | offset | number or string or function | 0 | The offset of the tooltip relative to the target. |
| 11 | fallbackPlacement | string or array | 'flip' | Specify the fallback position. |
| 12 | boundary | string or element | 'scrollParent' | Specify the boundary of the tooltip. |
| 13 | sanitize | boolean | true | Enable or disable the sanitization. |
| 14 | whiteList | object | Default value | The object that contains allowed attributes and tags. |
| 15 | sanitizeFn | null or function | null | Provide your own sanitize function. |
| 16 | popperConfig | null or object | null | Change the default Popper.js configuration. |
#2) Methods
The following table shows the available methods:
| Method | Description | Example | |
|---|---|---|---|
| 1 | $().tooltip (options) | Activate the tooltip with an option. | - |
| 2 | .tooltip('show') | Show the tooltip. | $('#element').tooltip('show') |
| 3 | .tooltip('hide') | Hide the tooltip. | $('#element').tooltip('hide') |
| 4 | .tooltip('toggle') | Toggle the tooltip. | $('#element').tooltip('toggle') |
| 5 | .tooltip('dispose') | Hide and destroy the tooltip. | $('#element').tooltip('dispose') |
| 6 | .tooltip('enable') | Enable the tooltip. | $('#element').tooltip('enable') |
| 7 | .tooltip('disable') | Disable the tooltip. | $('#element').tooltip('disable') |
| 8 | .tooltip('toggleEnabled') | Toggle the ability of tooltip (to be shown or hidden). | $('#element').tooltip('toggleEnabled') |
| 9 | .tooltip('update') | Update the position of the tooltip. | $('#element').tooltip('update') |
#3) Events
The following table shows the available events:
| Event | Description | Example | |
|---|---|---|---|
| 1 | show.bs.tooltip | This event is fired when the tooltip is about to be shown to the user. | $('#myTooltip').on('show.bs.tooltip', function () { // write your code here }) |
| 2 | shown.bs.tooltip | This event is fired when the tooltip is fully visible to the user (after the completion of CSS transitions) | $('#myTooltip').on('shown.bs.tooltip', function () { // write your code here }) |
| 3 | hide.bs.tooltip | This event is fired when the tooltip is about to be hidden from the user. | $('#myTooltip').on('hide.bs.tooltip', function () { // write your code here }) |
| 4 | hidden.bs.tooltip | This event is fired when the tooltip is fully hidden from the user (after the completion of CSS transitions). | $('#myTooltip').on('hidden.bs.tooltip', function () { // write your code here }) |
| 5 | inserted.bs.tooltip | This event is fired after occurring the show.bs.tooltip event when the tooltip template has been added to the DOM. | $('#myTooltip').on('inserted.bs.tooltip', function () { // write your code here }) |
Frequently Asked Questions
In this section, we will discuss some of the FAQs about the topic. These questions will help you prepare for your examinations and interviews.
Q #1) What does a tooltip mean?
Answer: It is a tiny pop-up box that appears when a user places the cursor over an element.
Q #2) Where do you position tooltips?
Answer: The four types of positions are top, right, bottom, and left. The default position is at the top of the element.
Q #3) Why a tooltip is not working?
Answer: There can be a few reasons for that. One possible reason is that you didn’t include the popper.js file in your project.
Q #4) Do tooltips work on mobile?
Answer: Yes, it works on mobile devices.
Q #5) How do I use Bootstrap 4 tooltips?
Answer: You can use the data-toggle attribute and the title attribute to create a tooltip.
Q #6) How do I change the tooltip position in Bootstrap?
Answer: You can change the position by adding the data-placement attribute and set the values.
Conclusion
A Bootstrap tooltip is a small pop-up that appears when a user places the cursor over an element. You can change the position of the tooltip as there are four available positions. Also, you can add tooltips with HTML.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial.
Happy learning!
=> Explore The Simple Bootstrap Training Series Here