Popovers

              
  <button type="button" class="btn btn-sm btn-primary" 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>
  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover without title</button>
  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="And here's some amazing content. It's very engaging. Right?">Popover on hover</button>
  
              
            

              
  <button type="button" class="btn btn-secondary btn-sm" 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 btn-sm" 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 btn-sm" 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 btn-sm" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
    Popover on left
  </button>
  
              
            

              
  <a tabindex="0" class="btn btn-sm btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="Click anywhere to dismiss popover">Dismissible popover</a>