Bootstrap 5 – Media & Interactive Display

Estimated reading: 3 minutes 12 views

🧷 Bootstrap 5 – Tooltips: Add Smart Hover Labels to UI Elements

🧲 Introduction – What Are Tooltips in Bootstrap 5?

Tooltips in Bootstrap 5 are small, informative overlays that appear when users hover over or focus on an element. They’re great for providing extra guidance or descriptions without cluttering the UI. Tooltips support placement, animation, delay, and accessibility features.

🎯 In this guide, you’ll learn:

How to activate tooltips with HTML and JavaScript
Customize placement, triggers, and content
Combine tooltips with buttons, icons, and form elements
Best practices for mobile and accessibility

✅ Example 1 – Basic Tooltip with Data Attributes

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">
  Hover Me
</button>

🔍 Explanation:

Attribute/Class	Description
`data-bs-toggle="tooltip"`	Enables tooltip behavior
`title`	Text that appears inside the tooltip
`.btn-secondary`	Styling only—tooltips work with any element

✅ Required Step – Initialize Tooltips via JavaScript

Tooltips must be activated using JavaScript (unlike some other Bootstrap components):

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(trigger => new bootstrap.Tooltip(trigger));

✅ Example 2 – Tooltip Placement (Top, Right, Bottom, Left)

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Right Tooltip
</button>

🔍 Placement Options:

top (default)
right
bottom
left
auto (smart placement based on viewport)

✅ Example 3 – Tooltips on Icons or Inline Text

<span data-bs-toggle="tooltip" title="Helpful hint!">
  ❓
</span>

Ideal for small icons, form labels, or field help text

✅ Custom Trigger Example (Focus, Click, Manual)

<input type="text" class="form-control" 
  data-bs-toggle="tooltip" 
  data-bs-trigger="focus" 
  title="Enter your full name">

Trigger Option	Behavior
`hover`	Default for mouseover
`focus`	Triggers on input focus
`click`	Toggles on click
`manual`	Only opens via JavaScript

✅ Manually Control Tooltip (JavaScript API)

const tip = new bootstrap.Tooltip(document.querySelector('#myBtn'));
tip.show();   // Show tooltip
tip.hide();   // Hide tooltip
tip.dispose(); // Destroy instance

✅ Tooltip with Delay

new bootstrap.Tooltip(document.querySelector('#delayedBtn'), {
  delay: { "show": 500, "hide": 100 }
});

Delays appearance/disappearance for a better experience

🛠️ Best Practices for Tooltips

Tip	Why It Helps
Use tooltips for short, helpful text	Avoid long or complex explanations
Always include `title` attribute	Fallback for screen readers and accessibility
Avoid tooltips on disabled elements	They don’t trigger on disabled buttons
Keep tooltips above focusable content	Prevents keyboard navigation issues
Don’t rely on hover for mobile UX	Touch devices don’t support hover like desktop

📌 Summary – Contextual Help Using Bootstrap Tooltips

Bootstrap 5 tooltips offer a clean way to display context-sensitive help or guidance without overwhelming the interface. They’re ideal for onboarding, forms, and icon-based navigation.

🔍 Key Takeaways:

Use data-bs-toggle="tooltip" and title to define tooltips
Initialize with JavaScript (required for functionality)
Customize placement, trigger, delay, and manual control
Accessible, responsive, and non-obtrusive

⚙️ Great for compact hints, instructional UIs, and user onboarding.

❓ FAQs – Bootstrap 5 Tooltips

❓ Are tooltips initialized automatically?
❌ No. You must manually initialize them using JavaScript.

❓ Can I use tooltips on form inputs?
✅ Yes, especially with focus triggers for accessibility.

❓ Do tooltips support HTML content?
✅ Not by default. Bootstrap 5 tooltips only support plain text. Use popovers for HTML.

❓ Why doesn’t my tooltip work on a disabled button?
✅ Disabled elements don’t trigger tooltips. Wrap them in a <span> to apply the tooltip.

« Previous Next »

Share Now :