Render annotation’s properties as tooltip

Q: How can I show an annotation property as a tooltip?

A: You can use PSPDFKit.CustomRenderers to do it:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
PSPDFKit.load({
  ...defaultConfiguration,
  customRenderers: {
    Annotation: ({ annotation }) => {
      if (!annotation.note) {
        return null;
      }
      const node = document.createElement("div");
      node.style.height = "100%";
      node.style.cursor = "pointer";
      node.style.pointerEvents = "all";
      node.setAttribute("title", annotation.note);
      return {
        node,
        append: true
      };
    }
  }
});

Check out a complete example of rendering a more complex tooltip-like UI with different annotation properties in our public catalog.

This has been tested in PSPDFKit for Web 2020.1.3.