Popovers
Standard Popovers
<button type="button" class="btn btn-theme" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Position Popover
<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>
Colored Popover
...
<button type="button" class="btn btn-theme me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Popover
</button>
<button type="button" class="btn btn-accent me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-accent-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Accent Popover
</button>
<button type="button" class="btn btn-primary me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-primary-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Primary Popover
</button>
<button type="button" class="btn btn-success me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-success-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Success Popover
</button>
<button type="button" class="btn btn-info me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-info-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Info Popover
</button>
<button type="button" class="btn btn-warning me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-warning-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Warning Popover
</button>
<button type="button" class="btn btn-danger me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-danger-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Danger Popover
</button>
<button type="button" class="btn btn-dark me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="adminuiux-dark-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Theme Dark Popover
</button>
<button type="button" class="btn btn-theme theme-red me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="theme-red adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Template Theme-Red
</button>
<button type="button" class="btn btn-theme theme-orange me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="theme-orange adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Template Theme-orange
</button>
<button type="button" class="btn btn-theme theme-teal me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="theme-teal adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Template Theme-teal
</button>
<button type="button" class="btn btn-theme theme-brown me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="theme-brown adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Template Theme-brown
</button>
<button type="button" class="btn btn-theme theme-indigo me-2 mb-3" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" data-bs-custom-class="theme-indigo adminuiux-theme-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
Template Theme-indigo
</button>
<span>...</span>