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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid custom tooltip doesn't hide sometimes

Thread ID:

Created:

Updated:

Platform:

Replies:

146293 Jul 30,2019 07:07 AM UTC Jul 6,2020 05:50 AM UTC Angular - EJ 2 9
loading
Tags: Grid
Nastaran Heydari
Asked On July 30, 2019 07:07 AM UTC

Hi,
I'm using tooltip for one of the columns in my grid and sometimes when I hover on the upper cell of the grid and mouse goes over the tooltip the tooltip doesn't hide and it sticks in its place until I push the Esc button on my keyboard. I thought its just in my code but I tried on the example in the documentation and got the same result. I took a screenshot and attached it in this thread for you to see. 
how can I fix that problem :

here's my code for the tooltip : 

`
    tooltip(args: QueryCellInfoEventArgs){
        if(args.column.field === 'part.technicalNo'){
            let cellData: any = args.data;
            const tooltip: Tooltip = new Tooltip({
                content: `${cellData.part.id} <br> ${cellData.part.name}`,
                enableRtl:true,
                cssClass:'grid-tooltip',
           },args.cell as HTMLTableCellElement)
        }
    }

`


Attachment: gridtooltip_44eb45d8.rar

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 30, 2019 10:42 AM UTC

Hi Nastaran, 

Greetings from Syncfusion support. 

By default, while using queryCellInfo then we created tooltip for each cell so we suspect that, when you hover the element then it does not destroy properly in Grid. We suggest you to use the below way to resolve the reported problem. Here we have created a rendered a tooltip and change the content dynamically when hover the grid element. 
 
Refer the below code example. 
 
[app.component.html] 
 
<ejs-tooltip #tooltip position='BottomCenter' 
             target=".e-rowcell"> 
 
    <ejs-grid [dataSource]='data' allowPaging=true (mouseover)='mouseover($event)'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns> 
    </ejs-grid> 
</ejs-tooltip> 
 
----------------------------------------------------------------------- 
[app.component.ts] 
 
export class AppComponent { 
    public data: Object[] = []; 
    @ViewChild("tooltip") 
    public tooltip: TooltipComponent; 
 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
    } 
 
    mouseover(args) { 
        if (args.target.classList.contains('e-rowcell') && args.target.innerText) { 
            this.tooltip.content = args.target.innerText; 
        } 
    } 
} 
 

We have prepared a simple sample in the following link. 


Regards, 
Thavasianand S. 


Nastaran Heydari
Replied On July 30, 2019 11:29 AM UTC

Thanks.
I need to just do this for one column. so I should check if the cell is for that column and the content of tooltip should some fileds of that row. how can I get that?

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 1, 2019 09:55 AM UTC

Hi Nastaran, 

We can achieve your requirement using the below code example. 

[app.component.html] 

<ejs-tooltip #tooltip position='BottomCenter' 
             target=".e-rowcell.customcss"> 
 
    <ejs-grid [dataSource]='data' allowPaging=true (mouseover)='mouseover($event)'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerName' [customAttributes]='customAttri' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns> 
    </ejs-grid> 
</ejs-tooltip> 

----------------------------------------------------------------------------------------------------------------------- 
[app.component.ts] 

export class AppComponent { 
    public data: Object[] = []; 
    @ViewChild("tooltip") 
    public tooltip: TooltipComponent; 
    public customAttri: object; 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
        this.customAttri = { 'class': 'customcss' }; 
    } 
 
    mouseover(args) { 
        if (args.target.classList.contains('customcss') && args.target.innerText) { 
            this.tooltip.content = args.target.innerText; 
        } 
    } 
} 



We have prepared a simple sample in the following link. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Nastaran Heydari
Replied On August 5, 2019 11:21 AM UTC

thanks that really helped.
what if I want to show the text of other column in the tooltip of that column? in 'args' I can just access the text of the hovered column cell. but I want to show the text of other column.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 6, 2019 09:44 AM UTC

Hi Nastaran, 

We can show other column value as a tooltip by providing the tooltip content of other columns in mouseover event. 

Refer the below code example. 

[app.component.ts] 

mouseover(args) { 
    if (args.target.classList.contains('customcss') && args.target.innerText) { 
        this.tooltip.content = args.target.parentElement.children[2].innerHTML; 
    } 
} 


We have modified the sample in the following link. 


Regards, 
Thavasianand S. 


Remy
Replied On June 29, 2020 12:51 AM UTC

Hi Thavasianand,

I am having the exact same issue than Nastaran. However, I need to access the data of the cell (the text of the tooltip is stored in the remote DB). At the moment I am using the queryCellInfo event and a simplified version of my code looks like this :

queryCellInfo(args: QueryCellInfoEventArgs) {

// CELL TOOLTIP
if (args.data['arrayOfWeeks']['week' + args.column.index]['commentVacancesRotations']) {
const tooltip: Tooltip = new Tooltip({ content: args.data['arrayOfWeeks']['week' + args.column.index]['commentVacancesRotations'].toString(),
openDelay: 300, position: 'RightCenter', showTipPointer: true, cssClass: 'GridTooltip' }, args.cell);
}

}

With the solution you provided (using the mouseover event), I cannot access to data of the "mouseovered" cell (like queryCellInfo's args.data) to use it in my condition as well as to use its content as the tooltip text. Would you happen to know if there is a workaround?

Thank you very much for your support.

Regards,
Remy


Shalini Maragathavel [Syncfusion]
Replied On June 29, 2020 01:53 PM UTC

Hi Remi, 

Thanks for contacting Syncfusion support. 

Based on your query you need to get row data in the mouseover event. To achieve your requirement we suggest you to use getRowInfo method of EJ2 Grid. In mouseover event we can get target element and using that element we can get the row data using getRowInfo method. 

For more information please refer the below code example  

mouseover(args) { 
    if (args.target.classList.contains('e-rowcell') && args.target.innerText) { 
       
      this.tooltip.content = args.target.innerText; 
          let rowInfo = this.grid.getRowInfo(args.target); // get row information 
     
   } 

 
Please find the  below sample for more information. 
For more information please refer the below document,  

Please get back to us if you need further assistance. 

Regards, 
Shalini M. 




Remy
Replied On July 4, 2020 05:41 AM UTC

Hi Shalini,

Gotcha, that worked great. Thank you so much for your quick support.

Regards,
Remy

Shalini Maragathavel [Syncfusion]
Replied On July 6, 2020 05:50 AM UTC

Hi Remy, 
  
Thanks for your update. 
  
We are happy to hear that your problem has been resolved. 
  
Please get back to us if you need further assistance from us. 
  
Regards,
Shalini M. 


CONFIRMATION

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