Query Builder - Add tooltip to DateTimePicker in template

[KS]

Hello,

I am using a value template in our QueryBuilder that uses the DateTimePicker control. The issue is that when the field gets small enough, it is not easy to read the selected date and time within the field.

Is there a way to add a tooltip to the DateTimePicker on hover, so that the user can see the value that is selected without clicking into it manually?

Thank you,

KS

[Keerthikaran Venkatachalam]

Hi KS,

Query 1: I am using a value template in our QueryBuilder that uses the DateTimePicker control. The issue is that when the field gets small enough, it is not easy to read the selected date and time within the field.

By using the CSS style, you can customize the value template of the QueryBuilder. Please refer to the below code snippet.

.e-rule-value.e-template-value {

  width: 230px !important;

}

Query 2: Is there a way to add a tooltip to the DateTimePicker on hover, so that the user can see the value that is selected without clicking into it manually?

By default, we added the browser tooltip for each date.

However, we also added a tooltip for the time popup. Please refer to the sample below.

Sample link: https://stackblitz.com/edit/angular-zu9vjt-gruxag?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[KS]

Hello,

We have the rule containers set up such that they display the field, operator, and value on one line. Please see the following screenshot, where the text in the DateTime field is hard to read once there are multiple groups added:

The tooltip we want to display is when hovering over the text that is highlighted, as the time portion of the date is cut off. As more groups are added, it gets more difficult to see the text displayed in the field.

Is there a way to add a tooltip so that when the user hovers over the DateTime value field, it will show the date and time that is selected?

Here is the updated sample with our CSS to show the rule containers displaying all in one row:

https://stackblitz.com/edit/angular-zu9vjt-5wwk3h?file=src%2Fapp.component.css,src%2Fapp.component.ts

Thank you,

KS

[Keerthikaran Venkatachalam]

Hi KS,

We checked the reported query, and we have rendered the tooltip for the input element of the date timepicker component. Please refer to the code snippet and sample provided below.

let datetimepicker: DateTimePicker = new DateTimePicker({

                htmlAttributes:  { id: "qbdatetimepicker", placeholder:"Select a date and time" },

                value: args.values ? args.values as any : this.dateTime,

                close: this.onClose,

                change: (e: any) => {

                    this.qryBldrObj.notifyChange(e.value.toGMTString(), e.element);

                },

            });

…

  this.tooltip = new Tooltip({

          // default content of tooltip

          content: 'Loading...',

          // set target element to tooltip

          target: '#qbdatetimepicker',

          // set position of tooltip

          position: 'TopCenter',

          // bind beforeRender event

          beforeRender: this.onBeforeRender,

        });

Sample link: https://stackblitz.com/edit/angular-zu9vjt-glrbx9?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[KS]

Hello,

Thank you for the sample.

Just one more thing, is there a way to prevent the tooltip from displaying if the field is empty? Right now, if you clear out the date field, the tooltip displays "Loading...", but in our case we would not need to display it if there is no date selected in the field yet.

Is this possible?

Thank you,

KS

[Keerthikaran Venkatachalam]

Hi KS,

We have checked the reported query, and by setting "args.cancel = true" in the beforeOpen of the tooltip, you can achieve your requirements. Please refer to the code snippet and sample provided below.

this.tooltip = new Tooltip({

      // default content of tooltip

      content: 'Loading...',

      // set target element to tooltip

      target: '#qbdatetimepicker',

      // set position of tooltip

      position: 'TopCenter',

      // bind beforeRender event

      beforeRender: this.onBeforeRender,

      beforeOpen: this.OnOpen,

    });

OnOpen(args) {

    if ((args.target as any).value == '') {

      args.cancel = true;

    }

  }

Sample link: https://stackblitz.com/edit/angular-zu9vjt-vwej1p?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V