<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Top popover" data-bs-content="This popover opend by click">
        On top
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-title="Popover on bottom" data-bs-content="This popover opend by click">
        On bottom
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-title="Popover on left" data-bs-content="This popover opend by click">
        On left
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-title="Popover on right" data-bs-content="This popover opend by click">
        On right
    </button>
    

    <button type="button" class="btn btn-orange" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-orange" data-bs-title="On Hover & Click " data-bs-trigger="hover focus" data-bs-content="After click, not dismiss automatically">
        On Hover & Click
    </button>
    

    <!-- Custom popovers -->
    <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-primary" data-bs-title="Primary popover" data-bs-content="This popover is themed via CSS variables.">
        Primary popover
    </button>
    <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-success" data-bs-title="Success popover" data-bs-content="This popover is themed via CSS variables.">
        Success popover
    </button>
    <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-info" data-bs-title="Info popover" data-bs-content="This popover is themed via CSS variables.">
        Info popover
    </button>
    
    <hr>
    
    <button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-warning" data-bs-title="Warning popover" data-bs-content="This popover is themed via CSS variables.">
        Warning popover
    </button>
    <button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-danger" data-bs-title="Danger popover" data-bs-content="This popover is themed via CSS variables.">
        Danger popover
    </button>
    <button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-dark" data-bs-title="Dark popover" data-bs-content="This popover is themed via CSS variables.">
        Dark popover
    </button>
    
    <hr>
    
    <button type="button" class="btn btn-orange" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-orange" data-bs-title="Orange popover" data-bs-content="This popover is themed via CSS variables.">
        Orange popover
    </button>
    

Following this css variables add more or customize your popover custom background according to color variable list in _variables.scss file.

    .popover-primary {
        --kleon-popover-border-color: var(--kleon-primary);
        --kleon-popover-header-bg: var(--kleon-primary);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-secondary {
        --kleon-popover-border-color: var(--kleon-secondary);
        --kleon-popover-header-bg: var(--kleon-secondary);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-success {
        --kleon-popover-border-color: var(--kleon-success);
        --kleon-popover-header-bg: var(--kleon-success);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-info {
        --kleon-popover-border-color: var(--kleon-info);
        --kleon-popover-header-bg: var(--kleon-info);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-warning {
        --kleon-popover-border-color: var(--kleon-warning);
        --kleon-popover-header-bg: var(--kleon-warning);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-danger {
        --kleon-popover-border-color: var(--kleon-danger);
        --kleon-popover-header-bg: var(--kleon-danger);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-dark {
        --kleon-popover-border-color: var(--kleon-dark);
        --kleon-popover-header-bg: var(--kleon-dark);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-orange {
        --kleon-popover-border-color: var(--kleon-orange);
        --kleon-popover-header-bg: var(--kleon-orange);
        --kleon-popover-header-color: var(--kleon-white);
    }
    .popover-light {
        --kleon-popover-border-color: var(--kleon-light);
        --kleon-popover-header-bg: var(--kleon-light);
        --kleon-popover-header-color: var(--kleon-dark);
    }
    .popover-white {
        --kleon-popover-border-color: var(--kleon-white);
        --kleon-popover-header-bg: var(--kleon-white);
        --kleon-popover-header-color: var(--kleon-dark);
    }