Tooltip on annotation hover

Technical Support WebViewer
, , , ,
1

Hey,
I’m trying to add a tooltip when hovering an annotation that has been programatically created after webviewer initialization.

this.model.links.forEach(async (link: any) => {
                const newLink = new Annotations.Link({
                    Subject: `${ link.target_version_label }: ${ link.target_version_title }`
                })
                const importingAnnotation = await annotationManager.importAnnotations(link.xfdf)
                // eslint-disable-next-line @typescript-eslint/naming-convention
                const { PageNumber, X, Y, Height, Width } = importingAnnotation[0]
                Object.assign(newLink, { PageNumber, X, Y, Height, Width })

                newLink.StrokeColor = new Annotations.Color(0, 165, 228)
                newLink.StrokeStyle = 'none'
                newLink.backgroundColor = new Annotations.Color(0, 165, 228, 0.1)
                newLink.StrokeThickness = 1
                newLink.NoMove = true
                // add padding to annotation box
                newLink.setWidth(newLink.getWidth() + 4)
                newLink.setHeight(newLink.getHeight() + 4)
                const previousRect = newLink.getRect()
                const generatedRect = new this.instance.Core.Math.Rect(
                    previousRect.x1 - 2,
                    previousRect.y1 - 2,
                    previousRect.x2 - 2,
                    previousRect.y2 - 2
                )
                newLink.setRect(generatedRect)

                // generate and add a drawing sheet URL to annotation
                const route = this.$router.resolve({
                    name: 'project-sheets-view',
                    params: {
                        id: this.$route.params.id,
                        pid: this.$route.params.pid,
                        version_id: link.target_version_id
                    }
                })
                const targetURI = new URL(route.href, window.location.origin).href
                newLink.addAction('U', new Actions.URI({
                        uri: targetURI,
                    })
                )

                annotationManager.addAnnotation(newLink)
                annotationManager.groupAnnotations(importingAnnotation[0], [newLink])
            })

This is how I import and create annotations.

Then I add this on document load

addHoverInfo (): void {
            this.instance.UI.setAnnotationContentOverlayHandler( (annotation: any) => {
                const div = document.createElement('div')
                div.appendChild(document.createTextNode(`${ annotation.Subject }`))
                return div
            })
        }

But it only works for annotations that I created using pdftron tools (like a circle, square, text highlight etc.)

Is there a way to do this for my usage?

Or can I somehow add a class/data-element/id to annotation html element, then target that html element using javascript and add a tooltip there using CSS?

2

Hello adam.partyka,

Can you please provide a document with the link annotations you have created?
This may require a custom annotation type that links to the URI you provide.

I tried adding the annotation content overlay to an existing link annotation on a PDF which did not work, I believe this is because it extends off of the HTML Annotation, like Fields. If you also try this on field annotations, the popup does not appear.

I have added this to our backlog as a feature request because popup should happen no matter the annotation type.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

3

Hey, I will try to get back to you with a pdf file you requested, can you in the meantime tell me if I can somehow target the created link annotations using javascript/css? Add a class to them maybe? Or ID? Then I would be able to generate the tooltip myself using simple javascript/css

4

Hello adam.partyka,

You can get all the Link annotations with

const links = [];
instance.Core.annotationManager.getAnnotationsList().forEach((annot)=>{
   if(annot instanceof instance.Core.Annotations.Link) {
        links.push(annot)
   }
})

or by accessing the link class, as shown by its innerElement:

image
image1914×208 57.2 KB

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron