Using summernote inside Nested Bootstrap modal dialogs and solving the problem of tooltips and popovers

I had the problems of using summernote inside dynamic generated bootstrap modal dialog and show its tooltips and popover. I solved it using the following steps for anyone interested in those issues:

First Make sure you specify dialogsInBody: true when create a summernote instance.

Second To support nested multi bootstrap modal dialogs used in summernote and to support showing tooltips and popover register the following event handlers in a global location:

$(document).on("show.bs.modal", '.modal', function (event) {
    console.log("Global show.bs.modal fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    $(this).css("z-index", zIndex);
    setTimeout(function () {
        $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
    }, 0);
}).on("hidden.bs.modal", '.modal', function (event) {
    console.log("Global hidden.bs.modal fire");
    $(".modal:visible").length && $("body").addClass("modal-open");
});
$(document).on('inserted.bs.tooltip', function (event) {
    console.log("Global show.bs.tooltip fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var tooltipId = $(event.target).attr("aria-describedby");
    $("#" + tooltipId).css("z-index", zIndex);
});
$(document).on('inserted.bs.popover', function (event) {
    console.log("Global inserted.bs.popover fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var popoverId = $(event.target).attr("aria-describedby");
    $("#" + popoverId).css("z-index", zIndex);
});

The previous code will support nested bootstrap modals dialogs and tooltips and popover. the following images show the results:

if you have any suggestions or notes kindly share them with me