<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
title
>Bootstrap Popover</
title
>
<
style
>
.background {
background-size: cover;
background-position: center;
background: rgb(58, 207, 92);
min-height: 100vh;
padding: 50px;
}
.popover {
background-color: rgba(27, 27, 27, 0.8);
color: white;
}
.popover-header {
color: green;
}
.popover-body {
color: white;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"background"
>
<
div
class
=
"container mt-5"
>
<
h3
class
=
"text-center text-light"
>
Hover the button for popover from left
<
button
type
=
"button"
class
=
"btn btn-warning"
data-bs-toggle
=
"popover"
data-bs-trigger
=
"hover"
data-bs-placement
=
"left"
title
=
"Left Popover"
data-bs-content
=
"This is the content of the Left Popover."
>
Hover me (Left)
</
button
>
</
h3
>
<
h3
class
=
"text-center text-light"
>
Hover the link for popover from right
<
a
href
=
"#"
class
=
"btn btn-danger"
data-bs-toggle
=
"popover"
data-bs-trigger
=
"hover"
data-bs-placement
=
"right"
title
=
"Right Popover"
data-bs-content
=
"This is the content of the Right Popover."
>
Hover me (Right)
</
a
>
</
h3
>
</
div
>
</
div
>
<
script
src
=
</
script
>
<
script
>
let popoverTriggerList = [].slice.call(document.querySelectorAll(
'[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</
script
>
</
body
>
</
html
>