Custom tooltip position

[kondaveeti sai prasanna]

Hi,

As part of our implementation, we have added a new icon in pdftron webviewer header. Also, we have added tooltip property for the same.

Our requirement to show tooltip at the top of our custom icon rather than at bottom end. Is there any way we can configure our own tooltip position for the custom icons in pdftron webviewer?

Thanks, 

Sai Prasanna K.

[Andrew Yip]

Hello

There isn't really a nice way of doing this. Currently the tooltip calculate how much room is left in the window and place the tooltip in the place that make the most sense. One thing you can do is manually override the CSS style, see the following guide for how to use your own CSS file to style WebViewer
https://www.pdftron.com/documentation/web/guides/customizing-styles/

You would want to do something like the following

.tooltip--bottom{

  transform: translateY(-250%);

}

.tooltip--bottom > .tooltip__content::before {

  transform: translateY(35px);

  left: 50% !important;

  margin-left: -8px !important;

  border-left: 8px solid transparent !important;

  border-right: 8px solid transparent !important;

  border-top: 6px solid #222 !important;

  border-bottom: 0px !important;

}

This is a bit awkward but will cause the tooltip to be above be above the button. You can change the CSS selector to better target which header button you want the tooptip to be above. One thing to note is since WebViewer is in an iframe, the tooltip won't be allowed to overflow outside of it. Please let me know if the above helps or if you have any other related questions

Best Regards,

Andrew Yip

Software Developer

PDFTron Systems, Inc.

www.pdftron.com