Dropdowns & Tooltips
Dropdown menus and contextual hints for better UX
1 Basic Dropdowns
Simple dropdown menus that open on click.
Dropdown Structure:
<div class="dropdown">
<button data-bs-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Item</a></li>
</ul>
</div>2 Dropdown Directions
Control the direction in which the menu opens.
💡 Tip:
Use
.dropdown
,
.dropup
,
.dropend
, or
.dropstart
on the container to control direction.
3 Advanced Content
Dropdowns can contain more than just links: forms, text, and more.
4 Basic Tooltips
Tooltips display contextual information on hover or focus.
Initialize Tooltips:
<button data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip text">
Button
</button>
<script>
// Tooltips require manual initialization
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
⚠️ Important:
Tooltips require manual JavaScript initialization, unlike other Bootstrap components.
5 Popovers
Popovers are like larger tooltips that can contain headers and more content.
6 Practical Example: Toolbar
Combine dropdowns and tooltips to create rich interfaces.
Document Editor
🎯 Key Takeaways
- Dropdowns: Work automatically with data attributes, no initialization needed
- Tooltips: Require manual initialization with JavaScript
- Popovers: Like tooltips but with more content (title + body)
- Directions: Control where they appear with placement attributes
- Flexible content: Dropdowns can contain any HTML