Custom tooltip position

kondaveeti_sai_prasa · March 19, 2021, 1:28pm

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 · March 23, 2021, 6:29am

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

amaleshwar · June 7, 2021, 6:19am

Hi,

Thanks for your help Andrew.

We have tried the above solution, it worked, now tooltip is displayed above the button. But it display all the tooltips(which are supposed to be displayed bottom) to above the button.
Is there any way to target the specific header button, that we want the tooptip to be above.

Thanks,
Amaleshwar

Andrew_Yip · June 18, 2021, 5:37pm

Hi Amaleshwar,

Unfortunately there isn’t currently a way to control how the tooltip behave when hovering over different buttons. One thing you can do is fork our UI and make changes to it to allow you to target the tooltip based on what button it’s hovering over. You can find out more about forking the UI in the link below

You would want to add a class to the Tooltip component

github.com

PDFTron/webviewer-ui/blob/4bcd70d9dee0eafe248bb85eb9b8da4ce36e5432/src/components/Tooltip/Tooltip.js#L136

    
      
          }
          
          
return (
            <React.Fragment>
              {child}
              {show
                && translatedContent
                && !isUsingMobileDevices
                && ReactDOM.createPortal(
                  <div
                    className={`tooltip--${location}`}
                    style={{ opacity, ...position }}
                    ref={tooltipRef}
                  >
                    <div className={`tooltip__content`}>
                      {translatedContent}
                      {hasShortcut && !hideShortcut && (
                        <span className="tooltip__shortcut">{shortcut}</span>
                      )}
                    </div>
                  </div>,

Maybe change it to

 className={`tooltip--${location} ${content}`}

and change your CSS to target the tooltip based on what the new class ending up being. Please let me know if you have any questions.

Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com