Attach (recommended) or Link to PDF file here:
[test planning.pdf](https://github.com/mozilla/pdf.js/files/7305078/test.planning.pdf)

Configuration:
- Web browser and its version: Firefox 93
- Operating system and its version: Windows 10 21H2
- PDF.js version: The integrated version
- Is a browser extension: no

Steps to reproduce the problem:
1. In the example, all shape and the "Line" cell of the first cell have a comment
2. Mouse over a "Line" cell or a shape, nothing appear except on mouse over their border
3. It is too difficult to use
4. There is also a vertical orientation issue reported in bug #7631

What is the expected behavior? (add screenshot)
Comments are shown on mouse hover or mouse click inside a cell or a shape

What went wrong? (add screenshot)
Comments are not shown when mouse hover or clicking inside a cell or a shape, only on their border

![image](https://user-images.githubusercontent.com/7791600/136419088-e083e2a3-d376-4d8c-9e0b-ce9dd5b83923.png)



this.container = parameters.container;
    this.trigger = parameters.trigger;
    this.color = parameters.color;
    this.titleObj = parameters.titleObj;
    this.modificationDate = parameters.modificationDate;
    this.contentsObj = parameters.contentsObj;
    this.hideWrapper = parameters.hideWrapper || false;
    this.pinned = false;
  }
  render() {
    const BACKGROUND_ENLIGHT = 0.7;
    const wrapper = document.createElement("div");
    wrapper.className = "popupWrapper";
    
    
    
    
    this.hideElement = this.hideWrapper ? wrapper : this.container;
    this.hideElement.hidden = true;
    const popup = document.createElement("div");
    popup.className = "popup";
    const color = this.color;
    if (color) {
      
      const r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
      const g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
      const b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
      popup.style.backgroundColor = Util.makeHexColor(r | 0, g | 0, b | 0);
    }
    const title = document.createElement("h1");