create popover on hover bootstrap code example

Example 1: bootstrap popover

<!-- Bootstrap 5 Popovers -->
<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>

<!-- Four directions -->
<button
   type="button"
   class="btn btn-secondary"
   data-bs-container="body"
   data-bs-toggle="popover"
   data-bs-placement="top"
   data-bs-content="Top popover"
>
   Popover on top
</button>
<button
   type="button"
   class="btn btn-secondary"
   data-bs-container="body"
   data-bs-toggle="popover"
   data-bs-placement="right"
   data-bs-content="Right popover"
>
   Popover on right
</button>
<button
   type="button"
   class="btn btn-secondary"
   data-bs-container="body"
   data-bs-toggle="popover"
   data-bs-placement="bottom"
   data-bs-content="Bottom popover"
>
   Popover on bottom
</button>
<button
   type="button"
   class="btn btn-secondary"
   data-bs-container="body"
   data-bs-toggle="popover"
   data-bs-placement="left"
   data-bs-content="Left popover"
>
   Popover on left
</button>

Example 2: bootstrap popover

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