Prev Next

BS5 Tooltip

Bootstrap 5 Tooltips are small popups that display additional information when hovering or focusing on an element.

Key Topics

Basic Tooltip

Use the data-bs-toggle="tooltip" attribute to enable tooltips on an element.

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

Explanation: The data-bs-toggle="tooltip" attribute enables the tooltip, and the title attribute provides the text.

Tooltip Placement

Set the tooltip's position using the data-bs-placement attribute with values like top, bottom, left, or right.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip Top
</button>

Explanation: Adjust the tooltip's position using the data-bs-placement attribute.

Custom Tooltip

Customize tooltip styles using CSS or utility classes.

<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="Custom styled tooltip">
    Custom Tooltip
</button>
<style>
    .tooltip-inner {
        background-color: #5cb85c;
        color: white;
    }
</style>

Explanation: Style the tooltip by customizing the .tooltip-inner class in your CSS.

Complete Tooltip Example

Here is a complete example demonstrating various tooltip placements and styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Tooltip Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Tooltip</h2>
        <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Default Tooltip">
            Default Tooltip
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on Top">
            Tooltip Top
        </button>
        <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="Custom styled tooltip">
            Custom Tooltip
        </button>
    </div>
    <style>
        .tooltip-inner {
            background-color: #5cb85c;
            color: white;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    </script>
</body>
</html>

Explanation: This example combines default, positioned, and custom tooltips for a comprehensive demonstration.

Key Takeaways

  • Enable tooltips with the data-bs-toggle="tooltip" attribute.
  • Set positions using data-bs-placement.
  • Customize tooltips with CSS by targeting the .tooltip-inner class.
Prev Next