Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

25 of 39
BS5 CarouselBS5 ModalBS5 TooltipBS5 PopoverBS5 Toast

💡 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.

Example02
Loading editor…

📍 Placement (data-bs-placement)

data-bs-placement – where the tooltip appears: top, right, bottom, left, or auto.

Example03
Loading editor…

✅ 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 Questions
Progress: 0 / 3