Is there a way to add a title to DatePickerWidgetAnnotation?

Technical Support
1

Which product are you using?
PDF.js Express

PDF.js Express Version
8.7.0

Detailed description of issue
Hello! Is there a way to add a title attribute or a tooltip on the date picker widget? the title currently undefined.I have tried using tooltipName and updating the title on the html inner element

** Snip of Code**

const field = new Annotations.Forms.Field(Id, {
            type: 'Tx', 
            tooltipName: 'blah' // could not get this to work 
        });
 
        const annot = new Annotations.DatePickerWidgetAnnotation(field, {});
               
        const createInnerDate = Annotations.DatePickerWidgetAnnotation.prototype.createInnerElement;
        annot.createInnerElement = function () {
            const el = createInnerDate.apply(annot, []) as HTMLInputElement; 
            el.title= 'blah' // could not get this to work 
            return el;
        };

Thanks!! :slight_smile:

3

Hi @Jen,

Probably the best way to add attributes is to use the setCustomData() API on the annotation itself.

https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#setCustomData__anchor

Best Regards,
Zach Serviss
Platform Support Engineer

5

Hi Zach,

Are you able to go into any more detail on the setCustomData() solution? Having the same issue where seem to be unable to remove the “undefined” title from a DatePickerWidgetAnnotation.

This means to the end user when they hover over the DateWidgetAnnotationPicker they get a tooltip that says “undefined”.

6

Hi @dale,

Thanks for clarifying that the tooltip name itself is undefined.

The elementName property will change the title of the element.

https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#elementName__anchor

Best Regards,
Zach Serviss
Platform Support Engineer

7

Thank you

I’ve attempted to set the elementName and get ‘Cannot set property elementName of [object Object] which has only a getter’ widget.elementName = ""

On conole.log of the elementName the name is outputed as ‘widget’ which is different from undefined showing on the tooltip.

8

Hi @dale,

Could you send over a screenshot showing this?

Best Regards,
Zach Serviss
Platform Support Engineer

9

image

10

Hello dale,

Here is a code snippet to add the tooltip to the annotation:

widgetAnnotation.getField().tooltipName = 'This is a tooltip!'

Best regards,
Tyler Gordon

11

Just adding on to this - this only seemed to work if putting title changes in annotations loaded event. Which is good enough for our use case.

       webViewer.Core.annotationManager.getAnnotationsList().forEach((a) => {
                if (a instanceof webViewer.Core.Annotations.DatePickerWidgetAnnotation) {
                    (a.innerElement as HTMLInputElement).title = '';
                }
            });