Query Builder - Add tooltips to dropdowns

[KS]

Hello,

Is there a way to add tooltips to the dropdowns for field and operator selection in the QueryBuilder? There are some cases where the options get cut off and it is hard to see what they are without a tooltip on hover.

Additionally, I tried to implement this part of your documentation on one of my value templates that uses a DropdownList, but it threw an error that the fields object does not contain the tooltip attribute, so it would not build.

Is there a way to implement both of these?

Thank you,

KS

[Keerthikaran Venkatachalam]

Hi KS,

We have checked your reported query and prepared a sample based on your requirements. Please refer to the code snippet and sample link below.

ngAfterViewInit(){

        //Initialize Tooltip component

        this.tooltip = new Tooltip({

            // default content of tooltip

            content: 'Loading...',

            // set target element to tooltip

            target: '.e-list-item',

            // set position of tooltip

            position: 'TopCenter',

            // bind beforeRender event

            beforeRender: this.onBeforeRender

        });

        this.tooltip.appendTo('body');

      }

    onClose(e : any) {

        let tooltip: Tooltip = (getComponent((document.getElementsByClassName("e-tooltip")[0] as any), 'tooltip') as Tooltip);

        tooltip.close();

    }

    //beforeRender event of tooltip

    onBeforeRender(args: TooltipEventArgs): void {

        // get the target element

        (this as any).content = args.target.textContent;

    }

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

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

Regards,

KeerthiKaran K V

[KS]

Hello,

Your reply is helpful, but it seems like the tooltip is not quite working properly when using a DropdownTree for the field selection. Please see the following sample:

https://stackblitz.com/edit/angular-ua1mdh-8li5uc?file=src%2Fapp.component.html,src%2Fapp.component.ts

If a parent is expanded, the tooltip shows all the names of the parent and its children, whereas I would like to only show the parent content within the tooltip:

Is this possible?

[Keerthikaran Venkatachalam]

Hi KS,

We have fixed the issue at the sample level. Please refer to the code snippet and sample below.

  onBeforeRender(args: TooltipEventArgs): void {

    // get the target element

    (this as any).content = (args.target.querySelector(".e-text-content") as any).innerText;

  }

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

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

Regards,

KeerthiKaran K V