Display tooltip on each cell

Display tooltip on each cell

Posted by: sdayal on 5 August 2021, 3:30 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 August 2021, 3:30 am EST

  Hi team,

  I want to display tooltip on each cell (both enabled and disabled cell).
  
  And the value of tooltip should be the UI value which is displayed on the grid (if ALL is displayed on the cell then ALL should be displayed on the tooltip).
  
  Also how can I display the tooltip below the cursor(default) and not on the top or bottom of the cell (adjust the tooltip position).

  https://stackblitz.com/edit/angular-z8eskn?file=src/app/app.component.ts

  I have used the below function to display tooltip:- (Refer 268)

    init(grid){
      //some initialization work
      let tt = new wjcCore.Tooltip();
      grid.formatItem.addHandler((s,e)=>{
        if(e.panel.cellType == wjcGrid.CellType.Cell){
          tt.hideDelay = 9999999;
          tt.setTooltip(e.cell, `${e.row}:${e.col}`);
        }
      });
    }
  

  but since we are displaying different value on UI for a cell (eg ALL) compared to it’s actual value. So,

  1. How can we show the UI value on tooltip ?
  2. How to display Tooltip on disabled cell ?
  3. Adjust the position of tooltip below the cursor ?

  Please help me with the solution.
  
  Regards.

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 11:31 pm EST

  Hi team,
  
  can you please help me with the solution.

  Regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 12:41 am EST

  Hi team,
  
  One more issue, in the belowe snippet if i click on the disabled full name textbox i.e. full name column cell, I’m getting an error:-

  flex.activeCell.firstChild.setSelectionRange is not a function
  ``` in the startEditing method Line: 695.
  Example :- 2nd row fullname column cell with value as 'b'. See the console.
  How can i resolve this ?
  https://stackblitz.com/edit/angular-zdddjg?file=src/app/app.component.ts
  
  Regards.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 3:36 am EST

  Hi,

  Regarding 1st, I have created a function that will return the text value or the input value accordingly.

  Regarding 2nd, For this, instead of using the setTooltip method, we will need to add a mousemove event listener and show the tooltip manually using the show method.

  Regarding 3rd, this is possible using the showAtMouse property. But this will only work with the setTooltip method and not with the show method. But if we will use the setTooltip method, then the tooltip will not be displayed on the disabled cells. So, you may need to alter your requirements accordingly.

  Refer to the updated sample below:

  https://stackblitz.com/edit/angular-svorgy

  Regarding the error, I have updated the sample according to the disabled cells. (line 700)

  https://stackblitz.com/edit/angular-dekj2c

  Regards,
  
  Ashwin

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 4:34 am EST

  Hi Ashwin,

  We cant change the requirement for position of tooltip, but can’t we apply some left /right position for tooltip class so that the tooltip will look some what near to the text value.
  
  We tried to change .wj-tooltip class but its not working. Please suggest.

  Thanks

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 8 August 2021, 10:36 pm EST

  Hi team,

  Can you help us with the solution.

  regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 12:06 am EST

  Hi,

  I have updated a sample so that the tooltip will follow the mouse cursor:

  https://stackblitz.com/edit/angular-svorgy

  ~regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 4:10 am EST

  Hi Ashwin,

  This works.
  
  Thank you