Is there a way to add a title to DatePickerWidgetAnnotation?

Which product are you using?
PDF.js Express

PDF.js Express Version

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:

Hi @Jen,

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

Best Regards,
Zach Serviss
Platform Support Engineer

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”.

Hi @dale,

Thanks for clarifying that the tooltip name itself is undefined.

The elementName property will change the title of the element.

Best Regards,
Zach Serviss
Platform Support Engineer

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.

Hi @dale,

Could you send over a screenshot showing this?

Best Regards,
Zach Serviss
Platform Support Engineer


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

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 = '';