bootstrap 5 accordion: prevent toggle on specified elements in header

Question

I have bootstrap 5 accordion
want to show popover to be displayed by clicking on icon in accordion header
popover is working but accordion is also toggling. I want to prevent toggling accordion if that popover-handler element is clicked.
my code is also there in https://codepen.io/fakhre-alam/pen/zYERaqQ

<div class="accordion-item mb-3 border shadow-sm">
            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button class="d-inine-block accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                    Heading                                                                        
                    <i class="fa fa-info-circle ms-3 popover-handler no-collapsable" 
                        data-bs-trigger="click" 
                        data-html="true" 
                        data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>" 
                        data-bs-content="some text in popover<br />
                            some more text in popover<br />
                            even more text in popover<br />
                            last line of text in popover</b>">
                    </i>
                </button>
                
            </h2>
            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body p-0 px-2" >                     
                        accordion content<br>
                        accordion content<br>
                        accordion content<br>
                        accordion content<br>
                        accordion content<br> 
                </div><!--.accordion-body-->
            </div>
        </div>
    </div>


<script>
$(function(){ 
    $('.popover-handler').popover({  
            html: true, 
    }); 
    $('body').on('click', '.popover-handler',function (e) {
         e.stopPropagation();
    });
});
</script>

Answer 1

As far as I know nested elements inside .accordion-button will not allow logging of inner element's events. I have some suggestions for you:

Suggestion 1: Split <i> in .accordion-button and then with absolute positioning achieve a visually similar appearance. Try it like this:

<style>
    .accordion-header {
        position: relative;
    }
    .i-custom {
        position: absolute;
        right: 50px;
        z-index: 9999;
    }
    .tooltip-custom {
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 99999;
    }
</style>
<div class="accordion-item mb-3 border shadow-sm">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
        <div class="d-flex">
            <button class="d-inine-block accordion-button text-start"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#panelsStayOpen-collapseOne"
                    aria-expanded="true"
                    aria-controls="panelsStayOpen-collapseOne">
                <h5 class="content_title fw-bold w-100 text-left">Heading 1</h5>
            </button>
            <div class="d-flex align-items-start tooltip-custom">
                <i class="fa fa-info-circle ms-3 popover-handler no-collapsable i-custom"
                   data-bs-trigger="click"
                   data-html="true"
                   data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>"
                   data-bs-content="some text in popover<br />
                        some more text in popover<br />
                        even more text in popover<br />
                        last line of text in popover</b>">
                </i>
            </div>
        </div>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
         aria-labelledby="panelsStayOpen-headingOne">
        <div class="accordion-body p-0 px-2">
            accordion content<br>
        </div>
    </div>
</div>

Suggestion 2: Change from click to hover event

<div class="accordion-item mb-3 border shadow-sm">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
        <button class="d-inine-block accordion-button text-start"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseTwo"
                aria-expanded="true"
                aria-controls="panelsStayOpen-collapseTwo">
            Heading 2
            <i class="fa fa-info-circle ms-3 popover-handler no-collapsable i-hover"
               data-html="true"
               data-bs-title="Hover POPOVER <i class='float-end btn-popover btn-close'></i>"
               data-bs-content="some text in popover<br />
                        last line of text in popover</b>">
            </i>
        </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
         aria-labelledby="panelsStayOpen-headingOne">
        <div class="accordion-body p-0 px-2">
            accordion content<br>
        </div>
    </div>
</div>

<script>
    $(function(){
        $('.i-hover').hover(function () {
            const popover = bootstrap.Popover.getInstance($(this))
            popover.toggle()
        })
    });
</script>

Full code here