<!-- Basic popover -->
<button type="button" 
        class="btn btn-lg btn-danger" 
        data-bs-toggle="popover" 
        data-bs-title="Popover title" 
        data-bs-content="Popover content">
  Click to toggle popover
</button>

<!-- JavaScript initialization -->
<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>

<!-- Placement options -->
<button data-bs-placement="top">Top</button>
<button data-bs-placement="right">Right</button>
<button data-bs-placement="bottom">Bottom</button>
<button data-bs-placement="left">Left</button>
<button data-bs-placement="auto">Auto (default)</button>

<!-- HTML content in popover -->
<button type="button" 
        class="btn btn-info" 
        data-bs-toggle="popover" 
        data-bs-html="true" 
        data-bs-title="<i class='bi bi-info-circle'></i> Information" 
        data-bs-content="<div><strong>Important:</strong> This is HTML content.<br><button class='btn btn-sm btn-primary'>Action</button></div>">
  HTML Content Popover
</button>

<!-- Alternative method using data-bs-content selector -->
<button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="popover" 
        data-bs-html="true" 
        data-bs-content="#htmlContent">
  Popover with selector
</button>

<div id="htmlContent" class="d-none">
  <h5>Custom HTML Content</h5>
  <p>This content will be displayed in the popover.</p>
  <button class="btn btn-sm btn-primary">Click me</button>
</div>

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

<!-- Custom class -->
<button data-bs-custom-class="custom-popover">
  Custom Styled
</button>

<!-- Custom CSS -->
.custom-popover {
  background-color: #6f42c1;
  color: white;
}

<!-- Delay options -->
<button data-bs-delay='{"show": 500, "hide": 100}'>
  Delayed Popover
</button>

Events

• show.bs.popover - Fires immediately when show is called
• shown.bs.popover - Fires when popover is visible
• hide.bs.popover - Fires immediately when hide is called
• hidden.bs.popover - Fires when popover is hidden
• inserted.bs.popover - Fires after popover content is added to DOM

// JavaScript initialization and usage

// Initialize all popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

// Initialize specific popover with options
const myPopover = new bootstrap.Popover(document.getElementById('myPopover'), {
  title: 'Custom Title',
  content: 'Custom content',
  placement: 'right',
  trigger: 'hover',
  html: true,
  delay: {show: 300, hide: 100}
})

// Programmatic control
myPopover.show()     // Show popover
myPopover.hide()     // Hide popover
myPopover.toggle()   // Toggle popover
myPopover.dispose()  // Destroy popover

// Event handling
document.getElementById('myPopover').addEventListener('shown.bs.popover', function () {
  console.log('Popover was shown')
})