0

Bootstrap 5 Popovers Usage

 2 weeks ago
source link: https://www.geeksforgeeks.org/bootstrap-5-popovers-usage/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Bootstrap 5 Popovers Usage

Last Updated : 15 Dec, 2022

Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called “data-bs-content”. We can also include interactive controls.

Bootstrap 5 Popovers Usage Events:

  • Options: Options can be passed as the data attribute in the element which performs a specified function. We can pass the data attributes by appending option names with the “data-bs-” like data-bs-animation=””.
  • Methods: Methods are used to perform some tasks like the show, hide, toggle, dispose of, enable, disable, etc.
  • Events: Bootstrap popover calls the event automatically when some method is called for example when the show method is called the bootstrap javascript automatically calls triggers show.bs.popover. We also have shown.bs.popover, hide.bs.popover, hidden.bs.popover events.

Example 1: In this example, we will demonstrate popover options.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Popover Usage </strong>
<br>
<button type="button"
class="btn btn-primary" 
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
data-bs-trigger="click">
Popover on top
</button>
</center>
<script type="text/javascript">
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

Output :

ssm_op.gif

Bootstrap 5 popovers usage

Example 2: In this example we will demonstrate popover methods like the show, hide and toggle.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" 
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Popover Usage</strong>
<br>
<button class="btn btn-primary btn-lg" 
id="Popover" 
data-bs-toggle="popover" 
title="Popover title" 
data-bs-content="Bootstrap5 popover content">
Bootstrap5 popover
</button>
<div class="mt-3">
<button type="button" 
class="btn btn-primary" 
id="show">
Show
</button>
<button type="button" 
class="btn btn-warning" 
id="hide">
Hide
</button>
<button type="button" 
class="btn btn-success" 
id="toggle">
Toggle
</button>
</div>
</center>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#Popover").popover("show");
});
$("#hide").click(function(){
$("#Popover").popover("hide");
});
$("#toggle").click(function(){
$("#Popover").popover("toggle");
});
});
</script>
</body>
</html>

Output:

Peek-2022-12-05-11-24.gif

Bootstrap 5 popovers usage

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#usage

Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs
And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK