you can try below sample code will work for your scenario
<!-- Tooltip-->
<div style="display:none; opacity:0" class="ModelTooltip">
<section class="slds-popover slds-popover_panel slds-nubbin_left-top" role="dialog">
<div class="slds-popover__header">
<header class="slds-media slds-media_center slds-m-bottom_small">
<div class="slds-media__body">
<h2 class="slds-text-heading_medium slds-hyphenate">
Title
</h2>
</div>
</header>
</div>
<div class="slds-popover__body">
<lightning-record-form record-id={objRecordId} object-api-name={objectapiName}
layout-type="Compact" columns="1" mode="readonly">
</lightning-record-form>
</div>
</section>
</div>
/* Handle Mouse Hover*/
handleMouseover(event) {
this.objRecordId = null
const toolTipDiv = this.template.querySelector('div.ModelTooltip');
toolTipDiv.style.opacity = 1;
toolTipDiv.style.display = "block";
// eslint-disable-next-line
window.clearTimeout(this.delayTimeout);
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout = setTimeout(() => {
this.objRecordId = event.recordId;
}, 50);
}
/* Handle Mouse Out*/
handleMouseout() {
const toolTipDiv = this.template.querySelector('div.ModelTooltip');
toolTipDiv.style.opacity = 0;
toolTipDiv.style.display = "none";
}