Bootstrap 4 Tooltip

Welcome to The Coding College! Tooltips in Bootstrap 4 are small, interactive popups that provide additional information when users hover over or focus on an element. These tooltips can help improve user experience by offering helpful hints without cluttering the interface.

In this tutorial, we’ll explore how to implement and customize tooltips using Bootstrap 4.

What is a Bootstrap 4 Tooltip?

A Tooltip is a floating text box that appears when users hover over or focus on a specific element. Bootstrap 4 tooltips are powered by Popper.js, making them responsive, customizable, and easy to implement.

Setting Up Tooltips

Before you can use tooltips, ensure your project includes the required Bootstrap and JavaScript libraries.

Include Bootstrap and Dependencies

Add the following links to your HTML file:

<!-- Bootstrap CSS -->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  

<!-- jQuery and Popper.js -->  
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>  

<!-- Bootstrap JavaScript -->  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Creating a Tooltip

To create a tooltip, add the data-toggle="tooltip" attribute to an HTML element and specify the title attribute for the tooltip content.

Example: Basic Tooltip

<!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>  
  <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>  
    <button type="button" class="btn btn-primary" data-toggle="tooltip" title="This is a tooltip!">  
      Hover over me  
    </button>  
  </div>  

  <script src="https://code.jquery.com/jquery-3.5.1.slim.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>  

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

Tooltip Placement

You can control the placement of tooltips using the data-placement attribute. Supported values include:

  • top
  • bottom
  • left
  • right

Example: Tooltip with Placement

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>  
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>  
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>  
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>

Customizing Tooltip Behavior

Bootstrap 4 tooltips can be customized for different behaviors, such as triggering on focus, hover, or click.

Tooltip Trigger Options

The data-trigger attribute defines how the tooltip is displayed. Supported values include:

  • hover (default)
  • focus
  • click
  • manual
<button type="button" class="btn btn-success" data-toggle="tooltip" data-trigger="click" title="This tooltip appears on click!">  
  Click Me  
</button>

Changing Tooltip Delay

You can control the delay before showing or hiding a tooltip using the data-delay attribute.

<button type="button" class="btn btn-info" data-toggle="tooltip" data-delay="500" title="This tooltip appears after a delay!">  
  Delayed Tooltip  
</button>

Styling Tooltips

Bootstrap 4 allows you to customize tooltip appearance by modifying the default CSS classes. For example:

.tooltip-inner {  
  background-color: #007bff; /* Change background color */  
  color: #fff; /* Change text color */  
  font-size: 14px; /* Adjust font size */  
}  

.tooltip-arrow {  
  border-top-color: #007bff; /* Match arrow color with tooltip */  
}

JavaScript API

Tooltips can also be controlled dynamically using Bootstrap’s JavaScript methods.

Show a Tooltip

$('#myElement').tooltip('show');

Hide a Tooltip

$('#myElement').tooltip('hide');

Toggle a Tooltip

$('#myElement').tooltip('toggle');

Accessibility

Bootstrap 4 tooltips are built with accessibility in mind, ensuring compatibility with screen readers and other assistive technologies.

Conclusion

Bootstrap 4 tooltips are a powerful and user-friendly way to enhance the user experience by providing additional context or information. With flexible placement, triggers, and styling options, you can easily integrate tooltips into your projects.

Leave a Comment