Bootstrap Tooltip

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Interactive Tooltips

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Tooltip classes to add small pop-up text boxes that appear on hover, perfect for providing extra information. We’ll pair tooltips with images for a vibrant look.

What You’ll Learn

Creating a basic tooltip
Positioning tooltips
Using tooltips on different elements
Combining tooltips with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Tooltips

Bootstrap Tooltips use the data-bs-toggle="tooltip" attribute with a title to display pop-up text when users hover over an element. They’re lightweight and customizable for position and style, ideal for buttons, links, or icons.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Tooltip

Start with a simple tooltip on a button. Use this code:

<div class="container">
    <h3>Basic Tooltip</h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Click to proceed">
        Hover Me
    </button>
</div>

Explanation:

container: Centers and constrains content.
btn btn-primary: Blue button for the tooltip trigger.
data-bs-toggle="tooltip": Enables the tooltip.
title="Click to proceed": Defines the tooltip text.

Hovering over the button shows the tooltip above by default.

Step 3: Position Tooltips

Control tooltip placement (top, right, bottom, left). Try this:

<div class="container">
    <h3>Positioned Tooltips</h3>
    <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Top tooltip">
        Top
    </button>
    <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Right tooltip">
        Right
    </button>
    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom tooltip">
        Bottom
    </button>
</div>

Explanation:

data-bs-placement="top", right, bottom: Sets tooltip position.
btn btn-success, btn-info, btn-warning: Green, cyan, and yellow buttons for variety.
Each button triggers a tooltip in a different direction.

This demonstrates flexible tooltip positioning.

Step 4: Use Tooltips on Different Elements

Apply tooltips to links and icons. Add this:

<div class="container">
    <h3>Tooltips on Links and Icons</h3>
    <a href="#" class="text-primary" data-bs-toggle="tooltip" title="Visit our site">Hover Link</a>
    <span class="ms-3" data-bs-toggle="tooltip" title="Info icon">
        <i class="bi bi-info-circle text-info"></i>
    </span>
</div>

Explanation:

a with text-primary: Blue link with a tooltip.
span with bi bi-info-circle: Bootstrap Icons info icon (assuming Bootstrap Icons are available) with a tooltip.
ms-3: Adds margin-start for spacing.
data-bs-toggle="tooltip": Enables tooltips on both elements.

This shows tooltips on non-button elements.

Step 5: Combine with an Image

Pair a tooltip-enabled element with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile Tooltip</h3>
            <p>Hover for user info.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="User: Jane Doe">
                View Profile
            </button>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into button (8 units) and image (4 units).
btn btn-primary with data-bs-placement="right": Blue button with a right-positioned tooltip.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Ensures the image is responsive with rounded corners.

The image suggests a profile context.

Final Code

Here’s a combined example with varied tooltips and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Tooltip</h3>
            <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Simple tooltip">
                Hover Me
            </button>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Positioned Tooltips</h3>
            <button type="button" class="btn btn-success me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Top tooltip">
                Top
            </button>
            <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="left" title="Left tooltip">
                Left
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Tooltip</h3>
            <p>Hover for project details.</p>
            <a href="#" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Project: Web App">
                View Project
            </a>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple tooltip on a gray button (default top position).
Two positioned tooltips on green (top) and cyan (left) buttons.
A project tooltip on a blue link-style button (right position) beside a red 250×150 image.
All tooltips are responsive, appearing on hover, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Tooltip Docs for more options.
Try data-bs-html="true" to include HTML in tooltips.
Use data-bs-custom-class for custom tooltip styles.

Conclusion

You’ve mastered Bootstrap Tooltips! With attributes like data-bs-toggle="tooltip" and data-bs-placement, plus striking images, you’ve created informative, interactive pop-ups. Keep experimenting to enhance your webpages.