We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tooltip is not hiding once the hover over and mouse out is complete

I have implemented tool tip in my code and able to see it in the table when i hover over it. This is for each row in the table. Once i hover over the item i can see the tool tip. But if i do it fast and hover over the other rows in the table then there are few tooltips which are still there and not hidden.

Then when i checked the console i can see the error as :

"Cannot read property 'hide' of null at t.hide Tooltip"


The code i am using is 

tooltip(args: QueryCellInfoEventArgs) {
    if (args.column.field === "myCategoryName") {
      if (!(args.data['myCategoryName'] === "" || args.data['myCategoryName'] === " " || args.data['myCategoryName'] === null)) {
        const toolcontent = args.data['myCategoryName'];
        const tooltip: Tooltip = new Tooltip({
          content: toolcontent
       }, args.cell as HTMLTableCellElement);
      }
       }
  } 

Can you please help in resolving this library issue. I have attached the screenshot with this ticket

Attachment: errortooltip_fb18b54.zip

1 Reply

CI Christopher Issac Sunder K Syncfusion Team July 16, 2019 01:12 PM UTC

Hi Mayank, 

Greetings from Syncfusion support. 

we have analyzed query and your provided screenshot. We can achieve your requirement by using Ejstooltip component. We need to add the grid component inside the tooltip. And set the tooltip target as grid rows common class name(“e-rowcell”). 

Please refer the below code snippets. 

<ejs-tooltip id='tooltip' [content]='content' target=".e-rowcell" (beforeRender)="onRender($event)"> 
    <ejs-grid [dataSource]='data' width='500px'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' textAlign='Center' width="25%"> 
                </e- column> 
                <e-column field='CustomerID' headerText='Customer ID' textAlign='Center' width="25%"></e-column> 
        </e-columns> 
    </ejs-grid> 
</ejs-tooltip> 

Please refer the below sample. 

Please check with this and get back to us if you require any further assistance. 

Thanks,
Christo 


Loader.
Up arrow icon