AdminUIUX

Learning

Please wait...
Let's learn and together we grow

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>
Badges
Progress