Render an annotation's properties as a tooltip

To show an annotation property as a tooltip, use PSPDFKit.CustomRenderers:

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 user interface (UI) with different annotation properties in our public catalog.

This has been tested in Nutrient Web SDK 2020.1.3.

Render an annotation’s properties as a tooltip