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
.