bootstrap popover

1.popover{
2    max-width: 100%; 
3    /* Max Width of the popover (depending on the container!) */
4}

1<!-- Bootstrap 5 Popovers -->
2<button
3   type="button"
4   class="btn btn-lg btn-danger"
5   data-bs-toggle="popover"
6   title="Popover title"
7   data-bs-content="And here's some amazing content. It's very engaging. Right?"
8>
9   Click to toggle popover
10</button>
11
12<!-- Four directions -->
13<button
14   type="button"
15   class="btn btn-secondary"
16   data-bs-container="body"
17   data-bs-toggle="popover"
18   data-bs-placement="top"
19   data-bs-content="Top popover"
20>
21   Popover on top
22</button>
23<button
24   type="button"
25   class="btn btn-secondary"
26   data-bs-container="body"
27   data-bs-toggle="popover"
28   data-bs-placement="right"
29   data-bs-content="Right popover"
30>
31   Popover on right
32</button>
33<button
34   type="button"
35   class="btn btn-secondary"
36   data-bs-container="body"
37   data-bs-toggle="popover"
38   data-bs-placement="bottom"
39   data-bs-content="Bottom popover"
40>
41   Popover on bottom
42</button>
43<button
44   type="button"
45   class="btn btn-secondary"
46   data-bs-container="body"
47   data-bs-toggle="popover"
48   data-bs-placement="left"
49   data-bs-content="Left popover"
50>
51   Popover on left
52</button>

1var popOverSettings = {
2    placement: 'bottom',
3    container: 'body',
4    html: true,
5    selector: '[rel="popover"]', //Sepcify the selector here
6    content: function () {
7        return $('#popover-content').html();
8    }
9}
10
11$('body').popover(popOverSettings);

1
2 <script>
3$(document).ready(function(){
4  $('[data-toggle="popover"]').popover({
5  	  html: true
6  }); 
7});
8</script>
9 

1<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

1<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>