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)



const { data, linkService } = this;
    const link = document.createElement("a");
    if (data.url) {
      if (
        (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
        !linkService.addLinkAttributes
      ) {
        warn(
          "LinkAnnotationElement.render - missing `addLinkAttributes`-method on the `linkService`-instance."
        );
      }
      linkService.addLinkAttributes?.(link, data.url, data.newWindow);
    } else if (data.action) {
      this._bindNamedAction(link, data.action);
    } else if (data.dest) {
      this._bindLink(link, data.dest);
    } else {
      let hasClickAction = false;
      if (
        data.actions &&
        (data.actions.Action ||
          data.actions["Mouse Up"] ||
          data.actions["Mouse Down"]) &&
        this.enableScripting &&
        this.hasJSActions
      ) {
        hasClickAction = true;