Bootstrap 5 Popovers show() Method

Last Updated : 30 Jan, 2023

Bootstrap 5 Popovers show() method is used to open the popover manually. It will show the popover before the actual shown.bs.popover event occurs.

Syntax:

popover.show()

Return value: This method will manually trigger the element’s popover to be displayed.

Example 1: In this example, we will learn about the Bootstrap 5 Popovers show() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h2>Bootstrap 5 Popovers show() Method</h2> 
    <button type="button" id="example" 
            data-bs-content="Hi Geek!!" 
            data-bs-placement="bottom"
            class="btn btn-info"> 
        Popover element 
    </button> 
    
    <button type="button" id="show" 
            class="btn btn-success"> 
            Show Popover Manually using this Button 
    </button> 
  
    <script> 
        const exampleEl = document.getElementById('example') 
        const popover = new bootstrap.Popover(exampleEl) 
        const showButton = document.getElementById('show') 
     
        showButton.addEventListener('click', () => { 
            popover.show()       
        }) 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will see the working of the show() and hide() methods.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h2>Bootstrap 5 Popovers show() Method</h2> 
    <button type="button" id="example" 
            data-bs-content="Hi Geek!!" 
            data-bs-placement="bottom"
            class="btn btn-info"> 
        Popover element 
    </button> 
    
    <button type="button" id="show" class="btn btn-success"> 
        Show Popover Manually using this Button 
    </button> 
    <button type="button" id="hide" class="btn btn-danger"> 
            Hide Popover Manually using this Button 
    </button> 
  
    <script> 
        const exampleEl = document.getElementById('example') 
        const popover = new bootstrap.Popover(exampleEl) 
        const hideButton = document.getElementById('hide') 
        const showButton = document.getElementById('show') 
        hideButton.addEventListener('click', () => { 
            popover.hide() 
        }) 
        showButton.addEventListener('click', () => { 
          popover.show()           
        }) 
    </script> 
</body> 
</html>