How to use a div as content for Twitter’s Popover?

Twitter’s Popover is a bootstrap component somewhat similar to tool-tip where the highlighting difference is that it is triggered whenever the user clicks on the specified selector. Before we use <div> as the content inside the popover, let us have a look on DOM structure of the popover:

Program: DOM structure of a popover.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- DOM structure template for the popover
     id's and attributes are usually specified
     automatically -->
<div class="popover fade show" 
     role="tooltip" 
     id="popover_XYZ"
     style="position: absolute; 
            will-change: transform;
            top: 0px; left: 0px; 
            transform: translate3d(6px, 360px, 0px);"
     x-placement="bottom">
    <div class="arrow" style="left: 80px;"></div>
    <h3 class="popover-header">Popover Header here</h3>
    <div class="popover-body">Popover Content here</div>
</div>

chevron_right


Output:

Div inside the popover: By default, we cannot define HTML inside the popover. For that, we will set html option as ‘true’ to allow HTML content inside popover when initializing at the initial phase. Store HTML div content inside a variable initialize that variable as an option for the popover.

  • Syntax:
    $([selector]).popover({ html:true; title:[header]; content:[Content] });
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1">
        
        <!-- CDN's Required -->
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <br>
        <br>
        <center>
            <div class="container">
                
                <!-- Data for popover header -->
                <div class="pickHead">
                    <h3 class="text text-success">
                      GeeksforGeeks
                    </h3>
                </div>
                
                <!-- Data for popover content -->
                <div class="pickData">
                    <div class="text">
                      A computer science portal for Geeks
                    </div>
                </div>
                <br>
                <br>
                
                <!-- Popover Button -->
                <button class="btn btn-success" 
                        data-toggle="popover">
                  Twitter's popover
                </button>
            </div>
        </center>
        <script>
            
            // Pick the div data as required
            var head = "" + $('.pickHead').html();
            var data = "" + $('.pickData').html();
            
            // Append the html data as the options
            $(document).ready(function() {
                $('[data-toggle="popover"]').popover({
                    html: true,
                    title: head,
                    content: data
                });
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




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.