I want to place tooltips inside a popover made with bootstrap 5. the tooltip code disappear, when I opened the popover (seen in page source code). tested with safari and firefox. both are not working. I tried it with different ways described in documentation.

<div id="popover_content_wrapper" class="m-0" hidden>
    <div class="po-content">
         <a role="button">Bet now</a>
         <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" title="tooltip 1"></i></a>
         <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip 2"></i></a>
         <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" data-title="tooltip 3"></i></a>
         <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-original-title="tooltip 4"></i></a>
    </div>
</div>

This is my script.js

$('[data-bs-toggle="tooltip"]').tooltip();

$('[data-bs-toggle="popover"]').popover({
    container: "body",
    html: true,
    content: function() {
        return $('#popover_content_wrapper').html();
    }
});

I also changed some styling of the popover and the tooltip.

.tooltip {
    z-index: 1151 !important;
}

.tooltip-inner {
    font-style: normal;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;

    background: #465263;
    border-radius: 2px;
    filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.5));
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #465263 !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #465263 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #465263 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #465263 !important;
}

.popover {
    width: 100%;
    max-width: 350px;
    height: 375px;

    background: #182028;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0px 2px 10px #000000;
    border-radius: 2px;

    margin: 0;
    padding: 0;
}

I use the libraries bootstrap-bundle 5.1.0, jquery 3.6.0, jquery-migrate 3.3.2, jquery-backstretch 2.1.18, waypoints 3.0.0, wow 1.1.2, jquery-form-validator 2.3.79 all from cdnjs