Customize tooltip shown on hover

Technical Support WebViewer
, ,
1

WebViewer Version: 8.10

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Si

Please give a brief summary of your issue:

Customize the tooltip shown on page navigation arrow hover

Please describe your issue and provide steps to reproduce it:

Hi, I want to change the behavior of the tooltip shown on page navigation arrow hover. This tooltip fades away when the mouse pointer leaves the arrow icon, I want the tooltip remain visible also when I move the mouse pointer over him.

Please provide a link to a minimal sample where the issue is reproducible:

Attached is a screenshot of the above mentioned tooltip

Untitled
Untitled819×537 108 KB

2

Hi,

Could you try the API below to always keep the Page Navigation Component on screen?
UI.disableFadePageNavigationComponent()
https://www.pdftron.com/api/web/UI.html#.disableFadePageNavigationComponent

Thanks.

Wanbo

3

Hi @Wanbo_Li I tried that but doesn’t resolve the issue, that API method does is only remain the navigation component (arrow keys and page numbers) visible but the tooltip still fading away when I move the mouse pointer. I wanna know if is there a way to customize the tooltip with the text “PREVIOUS PAGE” and “NEXT PAGE” on it.
Thank you for your reply.

4

Hi,

For your specific requirement, you can follow this guide and customize the WebViewer UI.

The file you may want to edit is webviewer-ui/PageNavOverlay.js at 8.11 · PDFTron/webviewer-ui · GitHub

Thanks.

Wanbo