Tooltip for each item selected in Multiselect dropdown

[Samir Modi]

Hi Team,

I have a nested object and I am binding the values using Object.keys by passing my object. I need to add tooltip to each selected value with tooltip content being its corresponding child object. Currently,  I see the default tooltip comes as the value itself. Can we customize the tooltip?

Example - var obj = { Apple: { color: red} , Mango: {color:yellow}

For the above example the values in the dropdown would be Apple and Mango and their corresponding tooltip would be color: red and color:yellow respectively.

Thanks in advance!

Samir

[Vinoth Kumar Sundara Moorthy]

Hi Samir, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement “Tooltip for each item selected in Multiselect dropdown” and made slight changes in your provided complex data as we cannot show the field in the MultiSelect DropDown. 

Please check the below code example, 

 

HTML 

<ejs-multiselect id='multiSelect' #multiSelect [dataSource]='items' [mode]='default' [fields]='fields'></ejs-multiselect> 

 

TS 

export class AppComponent implements OnDestroy { 

 

    public tooltip: Tooltip; 

 

    //MultiSelect items definition 

    public items: Object[] = [{ fruit: { Name: 'Apple', Color: 'red' } }, { fruit: { Name: 'Mango', Color: 'yellow' } }]; 

 

    public fields: Object = { text: 'fruit.Name', value: 'fruit.Color' }; 

 

    ngAfterViewInit() { 

        //Initialize Tooltip component 

        this.tooltip = new Tooltip({ 

            // default content of tooltip 

            content: 'Loading...', 

            // set target element to tooltip 

            target: '.e-list-item', 

            // bind beforeRender event 

            beforeRender: this.onBeforeRender 

        }); 

        this.tooltip.appendTo('body'); 

    } 

 

    //beforeRender event of tooltip 

    onBeforeRender(args: TooltipEventArgs): void { 

        // get the target element 

        let listElement = document.getElementById('multiSelect'); 

        let result: Object[] = listElement.ej2_instances[0].dataSource; 

        let i: number; 

        for (i = 0; i < result.length; i++) { 

            if (result[i].fruit.Name === args.target.textContent) { 

                this.content = result[i].fruit.Color; 

                this.dataBind(); 

                break; 

            } 

        } 

    } 

 

    ngOnDestroy() { 

        this.tooltip.destroy(); 

    } 

} 

 

Sample Link: https://stackblitz.com/edit/angular-mj4hvc-ivriee?file=app.component.ts 

 

Could you please check the above details with sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S