How to use a div as content for Twitter's Popover? - GeeksforGeeks

17 Feb, 2020
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.
<!-- 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>
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] });
$([selector]).popover({ html:true; title:[header]; content:[Content] });
Example:<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </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>
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">    </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>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2019
Bootstrap
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to change the background color of the active nav-item?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?