Bootstrap 5 Popovers Options

Last Updated : 22 Dec, 2022

Bootstrap 5 Popovers are small overlays that can be displayed on top of content to provide additional context or action options. Popover option are used to perform the specific function on the element. Options can be passed through the data attributes or java script. To pass the data attributes we

Syntax :

<tag data-bs-toggle="popover" 
     data-bs-* = "..."
</tag>

Note: * can be replaced with option name.

animation: Animation effect can be applied when the popover is shown. There are many available animation effects like fade in fade out slide etc.
content: Content is the most basic of all popover options, in which the content will be displayed when the user clicks the popover trigger. We can choose to display plain text, HTML, and even images.
selector : The selector option essentially allows you to delegate popovers to another element, which means that we can allow dynamically added HTML with the correct selectors to trigger popover as if they were present in the originally loaded DOM.
template: Specifies a custom HTML template for the Popover.
title : Title option is used to pass the title in the popover element.
triggers: Triggers let you specify which user action will trigger the popover. This could be clicking, hovering, or focusing on the element the popover.
fallbackPlacement: Placement is the option that let us know specify where on the page the popover should be placed. You can choose from “top”, “bottom”, “left”, and “right”.
boundary: Specifies the boundary element for the Popover. When set to “viewport”, the Popover will be contained within the viewport. When set to “scrollParent”, the Popover will be contained within the element’s scroll parent. The default value is “viewport”.
customClass : We can pass the classes to the popover which are specified in the template.
sanitize : By default it is “true”, we can sanitize activated template, content, title.
allowList : Contains allowed attributes and tags
sanitizeFn : We supply your own sanitization function, use sanitizeFn.
offset: Specifies the offset (in pixels) of the Popover from its reference element. The default value is 0.
popperConfig: PopperConfig option is used to configure the behavior of the popper.js library, It allows us to specify various options customize the popover behavior.
Delay: Delay is used to specify the after how many milliseconds the popover should hide or show from the user after clicking the particular button.
Html: If “true” we can pass the html elements into the popover.

Example 1: In these example we will demonstrate popover option content.

HTML

<!DOCTYPE html>   
<html>   
<head>    
    <meta charset="utf-8">   
    <meta name="viewport" content= 
    "width=device-width, initial-scale=1">   
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
         rel="stylesheet">   
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">   
    </script>   
</head>   
<body class="text-center">   
    
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h4>Bootstrap 5 Popover </h4> 
    <button class="btn btn-success" 
            data-bs-toggle="popover" 
            title="Popover title"
             data-bs-content="popover content"> 
        popover 
    </button> 
    
    <script type="text/javascript"> 
        var popoverTrigger =  
        [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
        var popoverList =  
        popoverTrigger.map(function (popoverTrigger2) { 
            return new bootstrap.Popover(popoverTrigger2) 
        }) 
    </script> 
</body>   
</html>   

Output :

Example 2: In these example, we will demonstrate popover option trigger where popover appears when the user hover the cursor on the element.

HTML

<!DOCTYPE html>   
<html>   
<head>    
    <meta charset="utf-8">   
    <meta name="viewport" content= 
"width=device-width, initial-scale=1">   
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
         rel="stylesheet">   
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">   
    </script>   
</head>   
<body class="text-center">   
    
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h4>Bootstrap 5 Popover </h4> 
    <a href="#" 
        data-bs-toggle="popover" 
        title="hooray !!"
        data-bs-content="popover triggered"
        data-bs-trigger="hover"> 
        popover 
    </a> 
    
   <script type="text/javascript"> 
        var popoverTrigger =  
        [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
        var popoverList = popoverTrigger.map(function (popoverTrigger2) { 
            return new bootstrap.Popover(popoverTrigger2) 
        }) 
    </script> 
</body>   
</html>   