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)



title.dir = this.titleObj.dir;
    title.textContent = this.titleObj.str;
    popup.appendChild(title);
    
    
    
    const dateObject = PDFDateString.toDateObject(this.modificationDate);
    if (dateObject) {
      const modificationDate = document.createElement("span");
      modificationDate.textContent = "{{date}}, {{time}}";
      modificationDate.dataset.l10nId = "annotation_date_string";
      modificationDate.dataset.l10nArgs = JSON.stringify({
        date: dateObject.toLocaleDateString(),
        time: dateObject.toLocaleTimeString(),
      });
      popup.appendChild(modificationDate);
    }
    const contents = this._formatContents(this.contentsObj);
    popup.appendChild(contents);
    if (!Array.isArray(this.trigger)) {
      this.trigger = [this.trigger];
    }
    
    for (const element of this.trigger) {
      element.addEventListener("click", this._toggle.bind(this));
      element.addEventListener("mouseover", this._show.bind(this, false));
      element.addEventListener("mouseout", this._hide.bind(this, false));
    }
    popup.addEventListener("click", this._hide.bind(this, true));
    wrapper.appendChild(popup);