Bootstrap 5 Popover Component on Hover

Last Updated : 19 Feb, 2024

The Bootstrap 5 Popover component allows for the creation of interactive hover-triggered tooltips that display additional content when hovering over an element. This feature enhances user experience by providing contextually relevant information without cluttering the interface, making it ideal for showcasing supplementary details or explanations.

Table of Content

Popover from Top and Bottom
Popover from Left and Right

Approach:

Structure your HTML with elements that will trigger the popovers.
Include the Bootstrap 5 CDN link in HTML file.
Add necessary data attributes to the popover trigger elements (data-bs-toggle=”popover”, data-bs-trigger=”hover”, data-bs-placement, title, and data-bs-content).
Customize popover styling using custom CSS classes if needed.
Initialize the popovers in your JavaScript code by selecting the trigger elements and creating Popover instances for each.

To display a popover from the top, set data-bs-trigger=”hover” and data-bs-placement=”top” attributes. Use the data-bs-content for the popover message. And to display a popover from the bottom, use the same approach as above but with data-bs-placement=”bottom”.

Example: Implementation to showcase popover from top and bottom.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 
    <title>Bootstrap Popover</title> 
    <style> 
        .background { 
            background-size: cover; 
            background-position: center; 
            background: rgb(58, 207, 92); 
            min-height: 100vh; 
            padding: 50px; 
        } 
  
        .popover { 
            background-color: rgba(27, 27, 27, 0.8); 
            color: white; 
        } 
  
        .popover-header { 
            color: green; 
        } 
  
        .popover-body { 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="background"> 
        <div class="container mt-5"> 
            <!-- Top -->
            <h3 class="text-center text-light"> 
                Hover the button for popover from top 
                <button type="button" class="btn btn-primary" 
                        data-bs-toggle="popover" data-bs-trigger="hover"
                        data-bs-placement="top" title="Top popover"
                        data-bs-content="This is the content of the Top Popover."> 
                    Hover me (Top) 
                </button> 
            </h3> 
            <!-- Bottom -->
            <h3 class="text-center text-light"> 
                Hover the link for popover from bottom 
                <a  href="#" class="btn btn-success" 
                       data-bs-toggle="popover" data-bs-trigger="hover"
                    data-bs-placement="bottom" title="Bottom Popover"
                    data-bs-content="This is the content of the Bottom Popover."> 
                    Hover me (Bottom) 
                </a> 
            </h3> 
        </div> 
    </div> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> 
      </script> 
    <script> 
        let popoverTriggerList = [].slice.call( 
            document.querySelectorAll('[data-bs-toggle="popover"]')) 
          
        let popoverList =  
        popoverTriggerList.map(function (popoverTriggerEl) { 
            return new bootstrap.Popover(popoverTriggerEl) 
        }) 
    </script> 
</body> 
  
</html>

Output:

To display a popover from the left, set data-bs-trigger=”hover” and data-bs-placement=”left” attributes. Utilize the data-bs-content attribute for the popover message. Similarly, to display a popover from the right, use the same approach as above but with data-bs-placement=”right”.

Example: Implementation to showcase popover from left and right.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 
    <title>Bootstrap Popover</title> 
    <style> 
        .background { 
            background-size: cover; 
            background-position: center; 
            background: rgb(58, 207, 92); 
            min-height: 100vh; 
            padding: 50px; 
        } 
  
        .popover { 
            background-color: rgba(27, 27, 27, 0.8); 
            color: white; 
        } 
  
        .popover-header { 
            color: green; 
        } 
  
        .popover-body { 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="background"> 
        <div class="container mt-5"> 
            <!-- Left -->
            <h3 class="text-center text-light"> 
                Hover the button for popover from left 
                <button type="button" class="btn btn-warning" 
                        data-bs-toggle="popover" data-bs-trigger="hover"
                        data-bs-placement="left" title="Left Popover"
                        data-bs-content="This is the content of the Left Popover."> 
                    Hover me (Left) 
                </button> 
            </h3> 
            <!-- Right -->
            <h3 class="text-center text-light"> 
                Hover the link for popover from right 
                <a  href="#" class="btn btn-danger" 
                       data-bs-toggle="popover" data-bs-trigger="hover"
                    data-bs-placement="right" title="Right Popover"
                    data-bs-content="This is the content of the Right Popover."> 
                    Hover me (Right) 
                </a> 
            </h3> 
        </div> 
    </div> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> 
      </script> 
    <script> 
        let popoverTriggerList = [].slice.call(document.querySelectorAll( 
          '[data-bs-toggle="popover"]')) 
            
        let popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 
            return new bootstrap.Popover(popoverTriggerEl) 
        }) 
    </script> 
</body> 
  
</html>