0

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"

4
  • 1
    This is a really complicated way of doing this. I'd follow the slds guide on tooltips.
    – sfdcfox
    Commented Nov 15, 2021 at 17:45
  • Is the problem with html side or js side?
    – sfMon
    Commented Nov 15, 2021 at 19:20
  • where is this.template.querySelector(selectedStatus)?
    – Nick C
    Commented Nov 16, 2021 at 1:39
  • This is placed inside a js method called from onmouseover event
    – sfMon
    Commented Nov 16, 2021 at 10:02

0

You must log in to answer this question.