Spread Js with angular 7 -Spread sheet cell with html tooltips

Spread Js with angular 7 -Spread sheet cell with html tooltips

Posted by: ashok.purty on 13 February 2020, 3:27 am EST

• 

  ashok.purty

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 February 2020, 3:27 am EST

  I have a requirement to implement the spreadsheet cells with html/css tooltips. Tooltip text can be static or dynamic. Is that type of implementation can be done using spreadsheet with angular 7.
  
  It will be very useful if you share some code sample.

  In my application i am using spreadjs with angular
  
  Let me know, if you need any other information

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 5:18 am EST

  Hi,
  
  You may create your own tooltip or use some existing tooltip e.g. bootstrap. You may show tooltip on some event such as mouse move, click etc.
  
  The information for the specified position can be detected using the Spread hitTest() method.
  
  Please refer to the attached sample for reference.

  Regards,
  
  Manish Gupta

  Spread-Tooltip.zip

• 

  ashok.purty

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 8:32 am EST

  Thanks Manish Gupta
  
  Hope it will work with my solution

  Thanks,
  
  Ashok Purty

• 

  ashok.purty

  • Post Options:
  • Link
    Copy

  Posted 25 February 2020, 7:39 am EST

  Hi Manish,
  
  Provided solution is working fine with google chrome.
  
  I feel some issue with mozilla browse.
  
  Tooltip with Mozilla working fine with laptop small screen(1920 x 1080) but tool-tip is not visible with large screen (2260 x 1440)
  
  Do you have some quick fix for this ??

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 4:26 am EST

  Hi Ashok,

  Please update the handler function for mousemove and mouseout event as follows and that should fix the issue:

  spread.getHost().addEventListener("mousemove", (e) => {
        this.updateTooltip(spread, e);
      });
      spread.getHost().addEventListener("mouseout", (e) => {
        this.updateTooltip(spread, e);
      });
  
  updateTooltip(spread, e) {
      let y = e.pageY - spread.getHost().offsetTop;
      let x = e.pageX - spread.getHost().offsetLeft;
      var result = spread.hitTest(x, y);
      this.toolTip.style.top = (e.pageY - this.toolTip.offsetHeight - 10) + "px";
      this.toolTip.style.left = e.pageX + "px";
      var str = this.getHitAreaName(result);
      if (result && str.length > 0) {
        this.toolTip.style.display = 'block';
        this.toolTip.innerHTML = `<b>${str}`;
      } else {
        this.toolTip.style.display = 'none';
      }
    }
  

  Please let us know if the issue persists for you.

  Regards
  
  Sharad

• 

  ashok.purty

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 4:38 am EST

  Thanks for quick solution
  
  Its working