Tooltips
A tooltip shows a short hint when you hover or focus an element.
In this page:
Syntax
<button data-bs-toggle="tooltip" data-bs-title="Tooltip text">Hover</button>
<script>
new bootstrap.Tooltip(element);
</script>Tooltips
Like popovers, tooltips are opt-in and must be initialised with new bootstrap.Tooltip(element). Put the text in the title attribute or data-bs-title and choose a placement with data-bs-placement.
They appear on hover and focus, so keep them short and never hide essential information in them.
Note:
Tooltips on disabled buttons need a wrapper element.
Example: Tooltips
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button type="button" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Hover me</button>
<a href="#" class="ms-3" data-bs-toggle="tooltip" data-bs-title="A helpful hint">Link with tooltip</a>
</div>
<script>
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => new bootstrap.Tooltip(el));
</script>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting initialisation
- Long tooltip text
- Putting essential information only in tooltips
Chapter Summary
- Tooltips must be initialised
- Text in title or data-bs-title
- Hover and focus triggers
- Keep them short
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: