Make annotation hover tooltip interactive

[Nhat Ho]

In the recent release, this function is available to customize the annotation tooltip: https://www.pdftron.com/api/web/WebViewerInstance.html#setAnnotationContentOverlayHandler. 

Is there a way for me to make the tooltip interactive so I can add buttons and other interactive components within the tooltip? Currently, if I move the mouse to the tooltip, it will disappear.

Thanks.

[Jussi Nieminen]

Hi,

setAnnotationContentOverlayHandler API is attached to mouse events and tooltip hovers based on mouse location so customizing it way you mention is not possible. However we do have annotation context menu for this purpose that can be customized. You can find how to customize annotation popup from this document https://www.pdftron.com/documentation/web/guides/customizing-popup/.

Is annotation popup API sufficient for your use case?

Best Regards,

Jussi Nieminen

Senior Software Developer

PDFTron Systems, Inc.

www.pdftron.com

[Nhat Ho]

Hello Jussi,

Thanks for the response. Regarding customizing popup, how can I add a customized component (React component if possible) to it? It's not quite clear from the document. Let say instead of a button, I want to add a dropdown list to the contextMenuPopup. Would that work?

Thanks

[Jussi Nieminen]

Hi,

There are multiple different type of header items that you can add to popup. You can find list of all items here https://www.pdftron.com/documentation/web/guides/customizing-header/#header-items. If one of the existing elements we provide is not enough, then you can use CustomElement header item (https://www.pdftron.com/documentation/web/guides/customizing-header/#customelement) to build your own functionality. Inside customElement you should be able to use React components as well, see the example on the custom element document page.

Best Regards,

Jussi Nieminen

Senior Software Developer

PDFTron Systems, Inc.

www.pdftron.com