Hey so this is the code for my lightning web component html:

<template>
<lightning-card>
<lightning-accordion allow-multiple-sections-open class="example-accordion"
onsectiontoggle={handleToggleSection}
active-section-name="B">
<lightning-accordion-section name="A" label="2 Bit Pizza LLC DBA Dominos [930781]">
<lightning-button-menu slot="actions"
alternative-text="Show menu"
icon-size="x-small"
menu-alignment="right">
<lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
<lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
</lightning-button-menu>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="test location">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [930551]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [923781]">
<lightning-accordion-section name="B" label="test archives">
</lightning-accordion-section>
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [930341]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [956081]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="Contacts">
<lightning-accordion-section name="B" label="Darren Wong">
<section aria-describedby="dialog-body-id-77" aria-label="Dialog Title" class="slds-popover slds-nubbin_left" role="dialog">
<button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close dialog</span>
</button>
<div class="slds-popover__body" id="dialog-body-id-77">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</section>
</lightning-accordion-section>
</lightning-accordion-section>
<lightning-accordion-section name="B" label="Orders">
</lightning-accordion-section>
</lightning-accordion-section>
</lightning-accordion>
</lightning-card>
</template>

I have slds popups but i want them to display only when i over the specific accordion text like when i hover over the accordion Darren Wong, a popover should appear with Darren's phone number and email address.