<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>GeeksforGeeks - Bootstrap 5</
title
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"mt-5"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>Bootstrap 5 Modal Tooltips and Popovers</
strong
>
</
div
>
<
div
class
=
"modal fade"
id
=
"gfg"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h1
class
=
"modal-title"
>
GeeksforGeeks Modal With Tooltip and Popover
</
h1
>
</
div
>
<
div
class
=
"modal-body"
>
<
button
type
=
"button"
id
=
"popover1"
class
=
"btn btn-success mb-4"
data-bs-toggle
=
"popover"
title
=
"Hello Geeks!"
data-bs-content
=
"Welcome Home"
>
Click for Popover
</
button
>
<
p
>
GeeksforGeeks is a computer science portal for
the geeks. Here you can cosume computer science
related content or share your knowledge with
the world by contributing on the write portal.
</
p
>
<
button
type
=
"button"
id
=
"tooltip1"
class
=
"btn btn-secondary mt-4"
data-bs-toggle
=
"tooltip"
title
=
"Welcome to GeeksforGeeks"
>
Hover for the tooltip
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
button
class
=
"btn btn-danger mt-4"
onclick
=
"showModal()"
>
Show Modal With tooltip and Popover
</
button
>
</
div
>
<
script
>
//Enabling the tooltip
bootstrap.Tooltip.getOrCreateInstance("#tooltip1");
// Enabling the popover
bootstrap.Popover.getOrCreateInstance("#popover1");
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</
script
>
</
body
>
</
html
>