Bootstrap 5 Tooltip
Display helpful information on hover
💬 What is Bootstrap Tooltip?
Tooltips are small pop-up boxes that appear when you hover over an element. They provide additional information or hints to users without cluttering your interface.
<!-- Basic Tooltip Example -->
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="This is a tooltip!">
Hover over me
</button>
Key Tooltip Features
Positioning
Place tooltips on any side: top, bottom, left, or right of elements for optimal visibility and user experience.
Customizable
Style tooltips with custom colors, sizes, and animations to match your website's design and branding perfectly.
Lightweight
Tooltips are small and fast, adding minimal overhead to your page while providing maximum user assistance and guidance.
Responsive
Works perfectly on all devices and screen sizes, automatically adjusting position to stay visible and accessible to users.
🔹 Basic Tooltip Setup
Hover over the button to see a tooltip appear, demonstrating instant access to supplementary information. Tooltips improve learnability and discovery by explaining icons, abbreviations, or interface controls on demand. This interactive guidance is invaluable for complex applications, onboarding flows, or feature-rich dashboards, helping users understand functionality without external help documentation or trial-and-error exploration.
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tooltip Button -->
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip"
title="Hello Tooltip!">
Hover Me
</button>
<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Initialize Tooltips -->
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>Output:
Hover over the button to see the tooltip
🔹 Tooltip Positions
Control tooltip placement with the data-bs-placement attribute, choosing top, bottom, left, or right relative to the target element. Bootstrap automatically adjusts position if space is insufficient, ensuring tooltips remain visible and legible. Responsive positioning is crucial for adaptable layouts, providing consistent help text across different screen sizes and element locations, enhancing accessibility and user support.
<!-- Top Tooltip -->
<button class="btn btn-primary" data-bs-toggle="tooltip"
data-bs-placement="top" title="Top tooltip">
Top
</button>
<!-- Right Tooltip -->
<button class="btn btn-success" data-bs-toggle="tooltip"
data-bs-placement="right" title="Right tooltip">
Right
</button>
<!-- Bottom Tooltip -->
<button class="btn btn-warning" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="Bottom tooltip">
Bottom
</button>
<!-- Left Tooltip -->
<button class="btn btn-danger" data-bs-toggle="tooltip"
data-bs-placement="left" title="Left tooltip">
Left
</button>Output:
🔹 HTML Content in Tooltips
Hover to see a tooltip with formatted HTML content like bold text, links, and structured information. This example shows how tooltips can deliver more than plain text—providing actionable links, emphasized terms, or visual cues. Such enriched tooltips reduce the need for external help pages by embedding comprehensive guidance directly within the UI, streamlining user support and enhancing self-service efficiency.
<button type="button" class="btn btn-info"
data-bs-toggle="tooltip"
data-bs-html="true"
title="<strong>Bold text</strong> and <em>italic text</em>">
HTML Tooltip
</button>Output:
Hover to see formatted HTML content
🔹 Tooltip on Links and Icons
Tooltips work on any HTML element—links, icons, images, text spans—providing contextual hints across your entire interface. Adding tooltips to non-button elements clarifies purpose, explains abbreviations, or offers previews, improving overall usability. This universal applicability makes tooltips a versatile accessibility and UX enhancement, ensuring all interactive or ambiguous elements can communicate their function clearly and immediately.
<!-- Tooltip on Link -->
<a href="#" data-bs-toggle="tooltip" title="Visit our homepage">
Home Page
</a>
<!-- Tooltip on Icon -->
<i class="fas fa-info-circle"
data-bs-toggle="tooltip"
title="More information"></i>
<!-- Tooltip on Span -->
<span data-bs-toggle="tooltip" title="Helpful hint">
Hover over this text
</span>