Sample slds table with popover of related record

samplePopover.html

<template>
    <div>
        <template if:true={ranger} >
            <lightning-record-view-form
                    record-id={ranger}
                    object-api-name="Contact">
                <div class="potato slds-box" style={boxClass}>
                    <lightning-output-field field-name="Name">
                    </lightning-output-field>
                    <lightning-output-field field-name="Email">
                    </lightning-output-field>
                    </div>
            </lightning-record-view-form>
        </template>
    </div>
</template>

samplePopover.js

import { LightningElement, api, track } from 'lwc';

export default class BoxPopover extends LightningElement {
    @track ranger;
    @track top = 50;
    @track left = 50;

    @api
    get myranger(){
        return this.ranger;
    }

    set myranger(value) {
        this.ranger = value;
    }

    @api
    get topmargin(){
        return this.top;
    }

    set topmargin(value) {
        this.top = value;
    }

    @api
    get leftmargin(){
        return this.left;
    }

    set leftmargin(value) {
        this.left = value;
    }

    get boxClass() { 
        return `background-color:white; top:${this.top - 280}px; left:${this.left}px`;
      }
}

sampleTable.html

<template>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Name">Name</div>
                </th>
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Age">Age</div>
                </th>
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Birthday">Birthday</div>
                </th>
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Height">Height</div>
                </th>
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Sex">Sex</div>
                </th>
                <th class="slds-cell-buffer_right" scope="col">
                    <div class="slds-truncate" title="Bear Weight">Weight</div>
                </th>
            </tr>
        </thead>
        <tbody>
        <template if:true={bears.data}>
            <div class="slds-m-around_medium">
                <template  for:each={bears.data} for:item="bear" for:index="index">
                    
                    <tr class={assignClass} key={bear.Id} data-rangerid={bear.Supervisor__c} onmouseout={hideData} onmouseover={showData}>
                        
                        <td data-label="Bear Name" class="slds-cell-buffer_right">
                            <div class=slds-truncate title="Bear Name">{bear.Name}</div>
                        </td>
                        <td data-label="Bear Age" class="slds-cell-buffer_right">
                            <div class="slds-truncate" title="Bear Age">{bear.Age__c}</div>
                        </td>
                        <td data-label="Bear Birthday" class="slds-cell-buffer_right">
                            <div class="slds-truncate" title="Bear Birthday">{bear.Birthday__c}</div>
                        </td>
                        <td data-label="Bear Height" class="slds-cell-buffer_right">
                            <div class="slds-truncate" title="Bear Height">{bear.Height__c}</div>
                        </td>
                        <td data-label="Bear Sex" class="slds-cell-buffer_right">
                            <div class="slds-truncate" title="Bear Sex">{bear.Sex__c}</div>
                        </td>
                        <td data-label="Bear Weight" class="slds-cell-buffer_right">
                            <div class="slds-truncate" title="Bear Weight">{bear.Weight__c}</div>
                        </td>
                    </tr>

                    </template>
                </div>
        </template>
        </tbody>
    </table>

    <c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>

</template>

sampleTable.js

import { LightningElement, track, wire, track } from 'lwc';
import searchBears from '@salesforce/apex/BearController.searchBears';
						
export default class SelectPicklist extends LightningElement() {
  @track searchTerm = '';
	@track bears;
	@track ranger;
	@track left;
	@track top;

	@wire(searchBears, {searchTerm: '$searchTerm'})
	loadBears(result) {
        this.bears = result;
	}
	showData(event){
		this.ranger = event.currentTarget.dataset.rangerid;
		this.left = event.clientX;
		this.top=event.clientY;
	}
	hideData(event){
		this.ranger = "";
	}
	get assignClass() { 
		return this.active ? '' : 'slds-hint-parent';
  }
}

<c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>

Adjust to leftmargin

Thank you for the solution! Can you please share the CSS part of this as well?