Bootstrap 4 JS Tooltip

Welcome to The Coding College! In this guide, we’ll dive into the Bootstrap 4 JS Tooltip, a lightweight and customizable component used to display helpful information when users hover over or focus on an element. Tooltips are excellent for enhancing user experience by providing contextual hints.

What Are Tooltips?

Tooltips are small pop-up messages that provide additional information about a UI element. In Bootstrap 4, tooltips are built with JavaScript and can be triggered by hovering, clicking, or focusing on an element.

1. Basic Tooltip Example

Here’s how to add a simple tooltip to an element.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Tooltip</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h2>Bootstrap 4 Tooltip Example</h2>
    <!-- Tooltip Element -->
    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="This is a tooltip!">
      Hover Over Me
    </button>
  </div>

  <!-- jQuery, Popper.js, and Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip(); // Initialize tooltips
    });
  </script>
</body>
</html>

2. How It Works

  1. data-toggle="tooltip"
    • This attribute activates the tooltip functionality on the element.
  2. data-placement
    • Specifies the tooltip’s position relative to the element. Options include:
      • top
      • right
      • bottom
      • left
  3. title
    • Defines the text to display in the tooltip.
  4. JavaScript Initialization
    • Tooltips must be initialized using the .tooltip() method.

3. Customizing Tooltips

Bootstrap tooltips are highly customizable.

Change Tooltip Colors

Use custom CSS to style tooltips:

.tooltip-inner {
  background-color: #007bff; /* Tooltip background color */
  color: white;            /* Tooltip text color */
}
.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: #007bff; /* Arrow color */
}

Tooltip Trigger Options

You can specify how the tooltip is triggered using the data-trigger attribute.

TriggerDescription
hoverDisplays tooltip on hover.
focusDisplays tooltip on focus.
clickDisplays tooltip on click.
manualRequires manual control.

Example:

<button class="btn btn-success" data-toggle="tooltip" data-trigger="click" title="Click to see me!">
  Click Trigger
</button>

Delay Display

Add delays for showing or hiding the tooltip using the delay option.

$('[data-toggle="tooltip"]').tooltip({
  delay: { show: 500, hide: 100 } // Delay in milliseconds
});

4. HTML Content Inside Tooltips

To include HTML content inside a tooltip, use the html option.

Example:

<button class="btn btn-info" data-toggle="tooltip" title="<b>Bold Text</b>">
  Hover for HTML Tooltip
</button>

<script>
  $('[data-toggle="tooltip"]').tooltip({
    html: true // Enable HTML rendering
  });
</script>

5. Tooltips with Events

You can hook into tooltip events to execute custom logic.

EventDescription
show.bs.tooltipFires before the tooltip is shown.
shown.bs.tooltipFires after the tooltip is shown.
hide.bs.tooltipFires before the tooltip is hidden.
hidden.bs.tooltipFires after the tooltip is hidden.

Example:

$('[data-toggle="tooltip"]').on('show.bs.tooltip', function () {
  console.log('Tooltip is about to be shown!');
});

6. Best Practices for Tooltips

  1. Keep It Simple: Use tooltips for brief, helpful hints. Avoid overloading them with information.
  2. Accessibility: Ensure tooltips are keyboard and screen reader accessible.
  3. Positioning: Use appropriate placement to prevent tooltips from being clipped.

Conclusion

Bootstrap 4 JS Tooltips are a fantastic way to enhance your website’s user experience by providing contextual hints. They are easy to implement, flexible, and highly customizable.

Leave a Comment