Popovers in bootstrap with examples

Bootstrap popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. In popover if you click on any element that you include in your script, it will give a particular message as a popover and you can see your message as you defined in the script.

It is easy to implement popovers on a website using Bootstrap as you just need to define a few attributes for the element as described below:

Syntax:

data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

The data-toggle attribute defines the Popover, title attribute defines the Tile for the Popover and data-content attribute is used to store the content to be displayed in the respective Popover.

Include the below javascript in your code to make it work.



filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover(); 
});
</script>

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    
    <!-- Link Bootstrap CSS -->
</head>
  
<body>
    <div class="container">
      <h3>Popover Example</h3>
      <a href="#" data-toggle="popover" 
                  title="Popover Header" 
                  data-content="Some content inside the popover">GeeksforGeeks</a>
    </div>
      
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
</body>
</html>

chevron_right


Output:

Different types of Popover orientation in Bootstrap

  • Top Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “top”.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        
        <!-- Bootstrap CSS and JS -->
    </head>
      
    <body>
        <div class="container">
          <h3>Popover Example</h3>
          <ul class="list-inline">
            <li><a href="#" title="Header" 
                            data-toggle="popover" 
                            data-placement="top" 
                            data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
          </ul>
        </div>
          
        <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();   
        });
        </script>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • Left Alignment: In this type of popover alignment, the popover content is displayed at the left of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “left”.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        
        <!-- Bootstrap CSS and JS -->
    </head>
      
    <body>
        <div class="container">
          <h3>Popover Example</h3>
          <ul class="list-inline">
            <li><a href="#" title="Header" 
                            data-toggle="popover" 
                            data-placement="left" 
                            data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
          </ul>
        </div>
          
        <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();   
        });
        </script>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • Right Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “right”.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        
        <!-- Bootstrap CSS and JS -->
    </head>
      
    <body>
        <div class="container">
          <h3>Popover Example</h3>
          <ul class="list-inline">
            <li><a href="#" title="Header" 
                            data-toggle="popover" 
                            data-placement="right" 
                            data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
          </ul>
        </div>
          
        <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();   
        });
        </script>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • Bottom Alignment: In this type of popover alignment, the popover content is displayed at the bottom of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “bottom”.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        
        <!-- Bootstrap CSS and JS -->
    </head>
      
    <body>
        <div class="container">
          <h3>Popover Example</h3>
          <ul class="list-inline">
            <li><a href="#" title="Header" 
                            data-toggle="popover" 
                            data-placement="bottom" 
                            data-content="Content">
                    GeeksforGeeks
                </a>
            </li>
          </ul>
        </div>
          
        <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();   
        });
        </script>
    </body>
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.