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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





145939 Jul 15,2019 10:09 AM UTC Jul 16,2019 01:12 PM UTC Angular - EJ 2 1
Tags: Tooltip
Mayank K
Asked On July 15, 2019 10:30 AM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On 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-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> 

Please refer the below sample. 

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



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon