Nearby lessons
25 of 39💡 BS5 Tooltip
📌 What Are Bootstrap 5 Tooltips?
Tooltips show short text on hover or focus. Add data-bs-toggle="tooltip" and title="Your text" to the element. Tooltips require JavaScript: create each with new bootstrap.Tooltip(element) (e.g. for all [data-bs-toggle="tooltip"]).
💡 Enabling Tooltips (data-bs-toggle, title)
data-bs-toggle="tooltip" – enables the component. title – text shown in the tooltip. You must initialize tooltips with JavaScript; they do not work with CSS only.
📍 Placement (data-bs-placement)
data-bs-placement – where the tooltip appears: top, right, bottom, left, or auto.
✅ Tooltip Best Practices
- Initialize with JavaScript:
new bootstrap.Tooltip(element)for each trigger. - Use title for the tooltip content.
- Use data-bs-placement to avoid tooltips going off-screen.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Popover