Hover popup expanding entire row of lightning datatable

Question

I am trying to show User info on hover over Name field in datatable, which is resulting in expansion of entire row rather than just hover popup.

Below is the code for datatable where I am using custom type datatable (due to business requirement for other fields).

 <c-custom-datatable key-field="Id" data={teacherAccts} columns={teacherColumns} hide-checkbox-column onrowaction={rowAction} oneditaccount={handleEdit}></c-custom-datatable>

and below is code snippet of columns in js

const teacherColumns = [
    { label: 'Teacher Name', fieldName: 'teacherNameURL', type: 'customUserData', typeAttributes: { userId : { fieldName: 'teacherId' }, userName : {fieldName: 'teachername'} } },
....
....
....
]

Below is the custom type datatable,

import LightningDatatable from "lightning/datatable";
import customUserData from './customUserData.html';

export default class CustomTypeDatatable extends LightningDatatable {
  static customTypes = {    
    customUserData: {
      template: customUserData,
      standardCellLayout: true,
      typeAttributes: ["userId", "userName"]
    }
  };
}

Below is the code snippet of customUserData.html in customtype datatable

<template>
    <c-custom-user-data user-id={typeAttributes.userId} user-name={typeAttributes.userName}></c-custom-user-data>
</template>

Below is the code snippet of CustomUserData component

CustomUserData.html

<template>
    <div >
        <a onmouseover={showData} onmouseout={hideData} data-id={userId} href="#">{userName}</a>
    </div>
    <div>
      <c-hover-pop-up topmargin={top} leftmarginn={left} myuser={hoverUserId}></c-hover-pop-up>    
    </div>
</template>

CustomUserData.js

import { LightningElement, api } from 'lwc';

  export default class CustomUserData extends LightningElement {
    
    @api hoverUserId;
    @api top;
    @api left;

    showData(event){
    this.hoverUserId = event.currentTarget.dataset.id;       
    this.left = event.clientX;
    this.top=event.clientY;    
    }
    hideData(event){
    this.hoverUserId = "";
    }
 }

Below is the code snippet of HoverPopUp component,

HoverPopUp.html

<template>
    <div>
        <template if:true={userId} >
        <div  >
            <section class="slds-popover slds-popover_panel slds-nubbin_top-left" role="dialog" style={boxClass}>              
              <div class="slds-popover__body">
                <lightning-record-form record-id={userId} object-api-name="User" layout-type="Compact" columns="1" mode="readonly"> </lightning-record-form>
              </div>
            </section>
          </div>
          </template>
      </div>  
</template>

HoverPopUp.js

import { LightningElement,api } from 'lwc';

export default class HoverPopUp extends LightningElement {
    @api userId;
    @api top = 50;
    @api left = 50;

    @api
    get myuser(){
        return this.userId;
    }

    set myuser(value) {
        this.userId = value;
        console.log('this userid ', this.userId);
    }

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

    set topmargin(value) {
        this.top = value;
        console.log('top ', this.top);
    }

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

    set leftmargin(value) {
        this.left = value;
        console.log('left ', this.left);
    }

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

Intial size of the row is as shown below enter image description here

While hovering on the Name field which is resulting in expansion of entire row as shown below

enter image description here

Just need to show hover popup instead of expanding the datatable row.

Code was clumsy as I was trying all trail and error.

Thank you.