I'm creating a lwc datatable with a custom column which contains a button and a corresponding popover. 

The problem is that the popover will not display as I would like it to, though by playing around with different position styles I was able to get fairly close.

I set the container of the entire table cell to position:relative so that the button is positioned properly within the column, but the issue is when I try to determine the position value for the popover itself.

When I set it to position:fixed, the popover displays properly initially, but as I scroll through the page, as fixed sets the position relative to the viewport, the popover position doesn't change with the table but stays at the same position relative to the window. (SCREENSHOT A) 
When I set the popover to position:absolute or position:relative, the popover will not will not display over the other rows (SCREENSHOT B) or it will display but expand the entire row, respectively. (SCREENSHOT C)

I would like to have the popover display over the rest of the table, as it does it position:fixed, but be positioned relative to the parent table, as with position:absolute or position:relative. 


Here is the code for reference:
​​​​​​​HTML

<template>

    <div style="text-align:left;" class="anchor slds-show">
        
        <!-- button -->
        <div class="slds-float_top" style="text-align:center;">
            <lightning-button-icon
                icon-name="utility:info_alt"
                onclick={openPop}    //these functions add/remove the slds-hide and slds-show classes from the popover
                onmouseover={hoverOpenPop}
                onmouseout={hoverClosePop}
            >
            </lightning-button-icon>    
        </div>
        <!-- end button -->
        
        <!-- popover -->
        <div class="slds-float_left popContainer slds-hide">
            <section class="slds-popover slds-nubbin_top-left slds-float_left slds-popover_large" role="dialog">
                //my code here
            </section>
        </div>
        <!-- end popover -->

CSS

:host .anchor {
    position: relative;
    display: block;
}
:host .popContainer {
    
}
:host .slds-popover {
    position: fixed;
}

Here are some screenshots of the scenarios described:
SCENARIO A
SCENARIO B
SCENARIO C


Please let me know if you need any clarification. Thanks!

I'm creating a lwc datatable with a custom column which contains a button and a corresponding popover. 

The problem is that the popover will not display as I would like it to, though by playing around with different position styles I was able to get fairly close.

I set the container of the entire table cell to position:relative so that the button is positioned properly within the column, but the issue is when I try to determine the position value for the popover itself.

When I set it to position:fixed, the popover displays properly initially, but as I scroll through the page, as fixed sets the position relative to the viewport, the popover position doesn't change with the table but stays at the same position relative to the window. (SCREENSHOT A) 
When I set the popover to position:absolute or position:relative, the popover will not will not display over the other rows (SCREENSHOT B) or it will display but expand the entire row, respectively. (SCREENSHOT C)

I would like to have the popover display over the rest of the table, as it does it position:fixed, but be positioned relative to the parent table, as with position:absolute or position:relative. 


Here is the code for reference:
​​​​​​​HTML

<template>

    <div style="text-align:left;" class="anchor slds-show">
        
        <!-- button -->
        <div class="slds-float_top" style="text-align:center;">
            <lightning-button-icon
                icon-name="utility:info_alt"
                onclick={openPop}    //these functions add/remove the slds-hide and slds-show classes from the popover
                onmouseover={hoverOpenPop}
                onmouseout={hoverClosePop}
            >
            </lightning-button-icon>    
        </div>
        <!-- end button -->
        
        <!-- popover -->
        <div class="slds-float_left popContainer slds-hide">
            <section class="slds-popover slds-nubbin_top-left slds-float_left slds-popover_large" role="dialog">
                //my code here
            </section>
        </div>
        <!-- end popover -->

CSS

:host .anchor {
    position: relative;
    display: block;
}
:host .popContainer {
    
}
:host .slds-popover {
    position: fixed;
}

Here are some screenshots of the scenarios described:
SCENARIO A
SCENARIO B
SCENARIO C


Please let me know if you need any clarification. Thanks!