Adding tooltips to dropdown items in Syncfusion Angular Query Builder

When working with the Syncfusion Angular Query Builder, you may want to enhance the user experience by providing additional context or information for each dropdown item. One way to achieve this is by implementing tooltips for dropdown items. This article will guide you through the process of adding tooltips to dropdown items in the Syncfusion Angular Query Builder.

Prerequisites

Before you begin, ensure you have the following:

• Syncfusion Angular UI components installed in your project.
• A basic understanding of Angular and TypeScript.

Step-by-Step Implementation

1. Setup the Query Builder Component

   First, you need to set up the Query Builder component in your Angular application. Include the Query Builder in your component’s HTML template as shown below:

   <div class="col-lg-12 control-section">
     <ejs-querybuilder #querybuilder [dataSource]="dataSource" [fieldModel]="fieldModel" [separator]="separator" [operatorModel] = "operatorModel">
     </ejs-querybuilder>
   </div>
   

2. Configure the Component Class

   In your component’s TypeScript file, configure the necessary properties and methods. You will need to define the data source, the field mode, the separator, and the operator model. Additionally, you will implement the onOpen method to add tooltips to the dropdown items.

   import { Component, ViewChild } from '@angular/core';
   import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
   import { DropDownListModel } from '@syncfusion/ej2-dropdowns';
   import { employeeData } from './data-source';
   
   @Component({
       selector: 'app-component',
       templateUrl: './app.component.html'
   })
   export class AppComponent {
       @ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent;
       dataSource: any = employeeData;
       operatorModel: DropDownListModel = { open: this.onOpen };
       fieldModel: DropDownListModel = { open: this.onOpen };
       onOpen(args) {
           let elem: any = args.popup.element.querySelectorAll('.e-list-item');
           for (var i = 0; i < elem.length; i++) {
               elem[i].title = elem[i].textContent;
           }
       }
   }
   

3. Implement the Tooltip Logic

   The onOpen method is triggered when the dropdown is opened. Within this method, you will access all the list items and set their title attribute to the text content of each item. This title attribute is what provides the tooltip functionality in HTML.

Live Demo

To see a live demonstration of the tooltips in action, visit the following StackBlitz link:

Syncfusion Angular Query Builder with Tooltips Demo

Conclusion

By following the steps outlined in this article, you can successfully implement tooltips for dropdown items in the Syncfusion Angular Query Builder. This enhancement can significantly improve the user experience by providing immediate information about each option available in the dropdown.

Additional References

• Syncfusion Angular Query Builder Documentation
• HTML title Attribute
• Syncfusion DropDownList Component