Bootstrap 4 Popover

Welcome to The Coding College! Popovers in Bootstrap 4 are like tooltips but more versatile, allowing you to include additional HTML elements, such as headings, paragraphs, and buttons. They’re perfect for displaying more detailed information or interactive content when a user interacts with a specific element.

In this tutorial, we’ll explore everything you need to know about Bootstrap 4 Popovers, from setup to customization.

What is a Bootstrap 4 Popover?

A Popover is a small overlay that provides contextual information or user interface elements. Unlike tooltips, popovers can contain rich content like HTML elements, forms, or images.

Setting Up Popovers

Before you can use popovers, ensure your project includes Bootstrap 4 and its dependencies.

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 Basic Popover

To create a popover, add the data-toggle="popover" attribute to an element and use the title and data-content attributes to define the popover’s heading and content.

Example: Basic Popover

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Popover</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 Popover Example</h2>  

    <!-- Popover Button -->  
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover Title" data-content="This is the content inside the popover.">  
      Click 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 Popovers -->  
  <script>  
    $(document).ready(function() {  
      $('[data-toggle="popover"]').popover();  
    });  
  </script>  
</body>  
</html>

Popover Placement

Use the data-placement attribute to control where the popover appears relative to the element. Supported values include:

  • top
  • bottom
  • left
  • right

Example: Popover with Placement

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" title="Top Popover" data-content="This popover is displayed on top.">Top</button>  
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" title="Bottom Popover" data-content="This popover is displayed at the bottom.">Bottom</button>  
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Left Popover" data-content="This popover is displayed to the left.">Left</button>  
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" title="Right Popover" data-content="This popover is displayed to the right.">Right</button>

Customizing Popover Triggers

By default, popovers are triggered on click. You can customize the trigger behavior using the data-trigger attribute. Supported values include:

  • click (default)
  • hover
  • focus
  • manual

Example: Hover Trigger

<button type="button" class="btn btn-info" data-toggle="popover" data-trigger="hover" title="Hover Popover" data-content="This popover appears on hover.">  
  Hover Over Me  
</button>

Dismissing Popovers

Popovers stay open until dismissed. You can use the data-trigger attribute to manage how they are dismissed, or dismiss them programmatically.

Example: Dismiss on Blur

<button type="button" class="btn btn-warning" data-toggle="popover" data-trigger="focus" title="Focus Popover" data-content="This popover disappears when you click outside.">  
  Focus on Me  
</button>

Popover with HTML Content

Bootstrap 4 supports popovers containing HTML. Use the data-html="true" attribute to enable HTML content.

Example: Popover with HTML

<button type="button" class="btn btn-danger" data-toggle="popover" data-html="true" title="HTML Popover" data-content="<b>Bold Text</b> and <a href='#'>a link</a>.">  
  HTML Popover  
</button>

Popover Options

You can customize popovers using JavaScript or data attributes. Some useful options include:

OptionDescriptionDefault
animationEnables/disables animation.true
containerAppends the popover to a specific element.false
delayDelay before showing/hiding popovers.0
htmlAllows HTML in the popover content.false
placementSpecifies the popover position.right
triggerDefines how the popover is triggered.click

Programmatic Control with JavaScript

You can control popovers dynamically using Bootstrap’s JavaScript methods.

Show a Popover

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

Hide a Popover

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

Toggle a Popover

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

Dispose of a Popover

$('#myElement').popover('dispose');

Styling Popovers

You can customize popovers by overriding default Bootstrap CSS. For example:

.popover-header {  
  background-color: #007bff;  
  color: #fff;  
}  

.popover-body {  
  font-size: 14px;  
  color: #333;  
}

Accessibility

Bootstrap 4 popovers are accessible and compatible with screen readers. Ensure you include appropriate ARIA attributes for better accessibility.

Conclusion

Bootstrap 4 Popovers provide a versatile way to display interactive and rich content within your web applications. Whether you need simple text popups or advanced HTML layouts, popovers are easy to implement and customize.

Leave a Comment