I am having a html table in my LWC. I have a tooltip displayed on hover on each table row. The content of the tooltip is placed inside the child component. Below is my code.
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right" id="Table1">
<tbody>
<tr class="slds-hint-parent" key={recId} onmouseout={handleMouseout} onmouseover={handleMouseover}>
<td data-label="Rating" data-item={recStatus__c} title={recName} style="width:70%">
{recName}
<template if:true={showTooltip}>
<div style="" class="ModelTooltip">
<c-tooltip
record={record} tool-tiprecord={toolTiprecord}>
</c-tooltip>
</div>
</template>
</td>
</tr>
</tbody>
</table>
handleMouseover(event) {
let selectedRow = event.target.dataset.item;
if(selectedRow != null && selectedRow != '' && selectedRow != undefined && selectedRow != 'In Progress') {
this.showTooltip = true;
this.toolTipDelay = setTimeout(() => {
this.template.querySelector('c-tooltip').selectedStatus(selectedRow);
},50);- //calling child component after a timeout
for(let i in this.toolTiprecord){
if(selectedRow == this.toolTiprecord[i].Status__c) {
this.showTooltip = true;
window.clearTimeout(this.delayTimeout);
this.delayTimeout = setTimeout(() => {
this.record = this.record;
}, 50); //sending the selected record to the child component
}
}
}
else {
this.showTooltip = false;
}
}
I referred one of the questions asked in our forum and make use of the setTimeOut function to delay the call a bit. But still I'm facing error as below "TypeError: this.template.querySelector(selectedStatus) is null"
this.template.querySelector(selectedStatus)
?