<!-- Toasts -->
<div class="toast-container position-relative">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <span class="me-2"><i class="bi bi-check2-square"></i></span>
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close p-0 ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
</div>
</div>

<!-- Custom Tooltips -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-title="This tooltip is themed via CSS variables.">
Primary Tooltip
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="tooltip-success" data-bs-title="This tooltip is themed via CSS variables.">
Success Tooltip
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="tooltip-info" data-bs-title="This tooltip is themed via CSS variables.">
Info Tooltip
</button>

<hr>

<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="tooltip-warning" data-bs-title="This tooltip is themed via CSS variables.">
Warning Tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" data-bs-title="This tooltip is themed via CSS variables.">
Danger Tooltip
</button>
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="tooltip-dark" data-bs-title="This tooltip is themed via CSS variables.">
Dark Tooltip
</button>

<hr>

<button type="button" class="btn btn-orange" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="tooltip-orange" data-bs-title="This tooltip is themed via CSS variables.">
Orange Tooltip
</button>

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

.tooltip-primary {
--kleon-tooltip-bg: var(--kleon-primary);
}
.tooltip-secondary {
--kleon-tooltip-bg: var(--kleon-secondary);
}
.tooltip-success {
--kleon-tooltip-bg: var(--kleon-success);
}
.tooltip-info {
--kleon-tooltip-bg: var(--kleon-info);
}
.tooltip-warning {
--kleon-tooltip-bg: var(--kleon-warning);
}
.tooltip-danger {
--kleon-tooltip-bg: var(--kleon-danger);
}
.tooltip-dark {
--kleon-tooltip-bg: var(--kleon-dark);
}
.tooltip-orange {
--kleon-tooltip-bg: var(--kleon-orange);
}