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.
<!-- 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] });
- 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"
>
w3wiki
</
h3
>
</
div
>
<!-- Data for popover content -->
<
div
class
=
"pickData"
>
<
div
class
=
"text"
>
A computer science portal for Beginner
</
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:
Contact Us