Tooltip in grid column misbehaving

[Nagendra Gupta]

Dear Team,

I have an issue related to tooltip in ejs-grid column. My tooltip is not fading up while moving the mouse to another row. I am attaching screenshot for the same please find the attachment below  and help me to resolve this issue as soon as possible.

Thanks & Regards

Nagendra Gupta

Attachment: tooltip_93ebcff8.zip

[Rajapandiyan Settu]

Hi Nagendra, 

Thanks for contacting Syncfusion support. 

Query : I have an issue related to tooltip in ejs-grid column. My tooltip is not fading up while moving the mouse to another row. 

 

We have validated your query at our end. We suggested you to use the below code sample to solve your problem. In which, we have shown the tooltip in the Grid by rendering Grid control inside the Tooltip component and The tooltip will be shown only hovering the target (‘.e-rowcell’) element. 

In the beforeRender event of Tooltip component, we dynamically changed the tooltip content based on the target element. 

ToolTip component: https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started/ 

Target: https://ej2.syncfusion.com/angular/documentation/api/tooltip/#target 

beforeRender: https://ej2.syncfusion.com/angular/documentation/api/tooltip/#beforerender 

App.component.html 

 

    <ejs-tooltip 

    #tooltip 

    target=".e-rowcell" 

    (beforeRender)="beforeRender($event)" 

  > 

    <ejs-grid [dataSource]="data" height="350"> 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          width="120" 

          textAlign="Right" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="Customer Name" 

          width="150" 

        ></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", null) 

  public tooltip: TooltipComponent; 

 

  ngOnInit(): void { 

    this.data = hierarchyOrderdata; 

  } 

  beforeRender(args) { 

//change the tooltip content 

    this.tooltip.content = args.target.closest("td").innerText; 

  } 

} 

 

We have prepared a sample for your reference. you can get it from below link. 

Sample: https://stackblitz.com/edit/angular-7jkzwj-cbxxyc?file=app.component.ts 

Please get back to us, if you need further assistance with this. 

Regards, 

Rajapandiyan S

[Nagendra Gupta]

Hi Team,

Thanks for your update, But your given example is not in my use because I am using custom tooltip as I don't want to use ejs-tooltip in my ejs grid as your example.

Below is my common function to which I am calling from ejs-grid queryCellinfo method.

    gridColumnTooltip(args, gridDataColumns) {

        const col: IColumnModal = args.column

        if (col

            && col.toolTipText

            && col.toolTipText!= '') {

            const tooltip: Tooltip = new Tooltip({

                content: col.toolTipText.toString()

            }, args.cell as HTMLTableCellElement);

        }

    }

[Rajapandiyan Settu]

Hi Nagendra, 

 

Thanks for your update. 

 

We have validated your query at our end. By rendering, tooltip control in the queryCellInfo event creates more number of tooltip controls in DOM. Which leads to tooltip stuck when hovering other cells. 

 

To resolve this, we suggest you to create single tooltip for the Grid and dynamically change the tooltip content when hover the cells. Please find the below code example for more information. 

 

[app.component.ts] 

 

 

  dataBound(args) { 

 // render the tooltip control in the grid content 

    this.tooltip = new Tooltip( 

      { target: ".e-rowcell"}, // set the target so tooltip shown only target elements 

      this.grid.element.getElementsByClassName("e-gridcontent")[0] as any 

    ); 

 // add the mouseover event to the grid content 

    this.grid.element.getElementsByClassName("e-gridcontent")[0].addEventListener("mouseover", this.contentmouseover.bind(this)); 

  } 

  contentmouseover(args) { 

    var rowInfo = this.grid.getRowInfo(args.target.closest("td")); 

    var column = rowInfo.column; 

// change the tooltip content based on the target element. 

    this.tooltip.content = rowInfo.rowData[(rowInfo.column as any).field ].toString(); 

  } 

 

 

 

 

We have prepared a sample for your reference. You can get it from the below link. 

 

Sample: https://stackblitz.com/edit/angular-7jkzwj-gdrgkf?file=app.component.ts 

  

Still, if you face the same issue, please share the below details to validate further. 

 

1. Share the details about tooltip control you used.
2. Are you using Syncfusion Tooltip control or your own component?
3. If possible, share a simple issue reproducible sample which will be very helpful for us.

 

Regards, 

Rajapandiyan S