Bootstrap Tooltip
A tooltip is a small pop-up label that appears when a user hovers over or focuses on an element. In Bootstrap 5, tooltips are a great way to give extra hints without cluttering your page. Because they rely on JavaScript, you must opt in and initialize them yourself before they will work.
What Is a Bootstrap Tooltip?
A tooltip shows a short piece of text when the user points at, or moves keyboard focus to, an element such as a button or link. It is perfect for icon-only buttons, abbreviations, or any control whose meaning might not be obvious. The text disappears as soon as the user moves away, so it never gets in the way.
Creating a Basic Tooltip
To mark an element as a tooltip trigger, add data-bs-toggle="tooltip" and put your message in the title attribute. The example below shows a button that reveals a tooltip on hover.
A button with a tooltip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-title="Hi! I am a tooltip">
Hover over me
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>
</body>
</html>In Bootstrap 5 you can use either the classic title attribute or the newer data-bs-title attribute. Both work, but data-bs-title keeps all of Bootstrap's data attributes together and is the recommended choice.
Initializing Tooltips with JavaScript
Adding the data attribute is only half the job. You also need a small script that finds every tooltip trigger on the page and turns it into a real tooltip. Place this script just before the closing body tag, after Bootstrap's own JavaScript bundle.
Enable all tooltips on the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>
</body>
</html>Choosing a Direction
Use the data-bs-placement attribute to control which side of the element the tooltip appears on. The four accepted values are shown in the table below.
Tooltips in every direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Tooltip on top">Top</button>
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="right"
data-bs-title="Tooltip on right">Right</button>
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="bottom"
data-bs-title="Tooltip on bottom">Bottom</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>
</body>
</html>Exercise: Bootstrap Tooltip
What must you do before a Bootstrap tooltip will actually appear on a page?
