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.