How to keep wijmo tooltip keep open for copying the tooltip content etc

How to keep wijmo tooltip keep open for copying the tooltip content etc

Posted by: arun.sunny on 7 July 2021, 5:21 am EST

• 

  arun.sunny

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 July 2021, 5:21 am EST

  HI team,

  I am using wijmo flex grid in my project.
  
  I have a requirement when a user mouse hover on a cell we should open a tooltip over that cell.
  
  Also user should be able to scroll or copy the content inside the tooltip.

  I have checked wijmo tooltip. I can use it to open when I hover on a cell.
  
  But I am not able to go into the tooltip content to copy or scroll the content inside tooltip. Because when I move focus to the tooltip, it will be hidden.

  Can you suggest a way, by which I can keep the tooltip open if I am inside the tooltip content?

  Thanks
  
  Arun Sunny

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 July 2021, 5:07 am EST

  Hi Arun,

  To implement the above requirement, we may make use of Wijmo PopUp Control and may perform the following:

  • "* “We may add mouseover event to show and hide popUp by making use of the hostElement property of FlexGrid and attaching the above handler to it.”

  • “To fix the size of popUp and ensure that it is text-selectable and scrollable, we may set ‘user-select’ css property to auto, set overflow-y to scroll, and adjust the height, width accordingly.”

  • “To get the cell data under the mouse pointer, we may make use of the getCellData() method of FlexGrid.”

  • “To hide and show popUp, we may make use of hide() and show() method of PopUp control.”
    
    "

  Please refer to the sample below:

  https://stackblitz.com/edit/js-zeexu7

  Regards,
  
  Ashwin

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 10:38 am EST

  HI Ashwin,

  Thank looks very promising.
  
  Is it possible to contain the popup to be inside grid?
  
  Right now the popup can flow out of table if we are on last row from bottom.

  thanks
  
  Arun

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 July 2021, 4:36 am EST

  Hi Arun,

  To implement the above requirement, we may perform the following:

  • "* "We may get the visible range of cells currently in view by making use of the viewRange property of FlexGrid.
    
    "
  • “We may update the popUp position from ‘Below’ to ‘Above’ if the pointer is near the last visible row.”
    
    "

  Please refer to the sample below:

  https://stackblitz.com/edit/js-8rmg6x

  ~regards

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Posted 14 July 2021, 6:55 am EST - Updated 3 October 2022, 1:12 pm EST

  Thank Ashwin,

  1. I can see in the example when we move fast between cells, sometimes the popup shown as transparent. Is it a known issue?

  2. Is it possible to show pointers in wijmo popup depending on the position ?
     
     Something like in the image added?
     
     

     

     729×179 12.5 KB

  Or is it possible to add a class to the popup depending on which position it rendered?

  thanks
  
  Arun

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2021, 8:47 am EST

  Hi Arun,

  The above issue of the PopUp being transparent is because of the fadeIn and fadeOut animation used by the PopUp when it is shown and hidden (which is enabled by default).To resolve this issue, we may set the fadeIn and fadeOut property of PopUp to false.
  
  We are working on the requirement of rendering a pointer with the PopUp. We’ll get back to you at the earliest.
  
  Please refer to the sample below:
  
  https://stackblitz.com/edit/js-8rmg6x?file=index.js
  
  Thank you

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Posted 15 July 2021, 8:54 am EST

  Thank you so much for the help.

  When you have a solution for the pointer, will you be mentioning it in the same forum thread?

  Thanks
  
  Arun Sunny

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2021, 8:55 am EST

  Yes, I will use this thread only.

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Posted 15 July 2021, 8:59 am EST

  thanks Ashwin for the help

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2021, 8:16 am EST

  Hi,

  To implement the arrow functionality, we may perform the following:

  • "* “We may add an additional div element within the PopUp control’s host element that would be used to create the arrow.”

  • “We may add the required CSS to adjust the height and background of the PopUp such that an arrow would appear outside the PopUp.”

  • “We may add/remove the CSS class for the arrow depending on the position of the PopUp (i.e. whether it is above or below the owner element).”
    
    "

  Please refer to the sample below:

  https://stackblitz.com/edit/js-a8k8uy

  ~regards

• 

  arun.sunny

  • Post Options:
  • Link
    Copy

  Posted 21 July 2021, 5:28 am EST

  Thanks Ashwin, will give it a go