Tooltip is shifted

[c]

Hi, 

When I try to add a new field in a customized popup and I add a validation on there. The tooltip is shifted.

Create a stackblitz as example: https://stackblitz.com/edit/fknsja

Just create an event and click on save. You will see the tooltip is shifted for the field EventType. 

I added the line 36 - 38 for my validation. 

any idea to resolve this ? (except CSS because if I many fields, can't repeat the process...)

Thank you !

[Ravikumar Venkatesan]

Dear Customer, 

Greetings from Syncfusion support. 

We have validated your reported query “Tooltip is shifted” at our end. We have resolved your problem by adding name attribute to the input element like the below code. We have prepared a sample for your reference and it can be available below. 

[index.ts] 

  popupOpen: (args: PopupOpenEventArgs) => { 

    if (args.type === 'Editor') { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector('.custom-field-row')) { 

        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 

        let formElement: HTMLElement = args.element.querySelector('.e-schedule-form'); 

        this.validator = (formElement as EJ2Instance).ej2_instances[0] as FormValidator; 

        this.validator.addRules('EventType', { required: [true, 'need data'] }) 

        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 

        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 

        let inputEle: HTMLInputElement = createElement('input', { 

          className: 'e-field' 

        }) as HTMLInputElement; 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        let dropDownList: DropDownList = new DropDownList({ 

          dataSource: [ 

            { text: 'Public Event', value: 'public-event' }, 

            { text: 'Maintenance', value: 'maintenance' }, 

            { text: 'Commercial Event', value: 'commercial-event' }, 

            { text: 'Family Event', value: 'family-event' } 

          ], 

          fields: { text: 'text', value: 'value' }, 

          value: (<{ [key: string]: Object }>(args.data)).EventType as string, 

          floatLabelType: 'Always', placeholder: 'Event Type' 

        }); 

        dropDownList.appendTo(inputEle); 

        dropDownList.element.setAttribute('name', 'EventType'); 

      } 

    } 

Sample: https://stackblitz.com/edit/ej2-schedule-validation-alert-customization-2hqwgl?file=index.ts 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[c]

Thanks you ! :) 

[Vengatesh Maniraj]

Dear Customer, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh