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:

  customRenderers: {
    Annotation: ({ annotation }) => {
      if (!annotation.note) {
        return null;
      const node = document.createElement("div"); = "100%"; = "pointer"; = "all";
      node.setAttribute("title", annotation.note);
      return {
        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.