We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tooltip for each item selected in Multiselect dropdown

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!


1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 26, 2019 12:14 PM UTC

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, 
<ejs-multiselect id='multiSelect' #multiSelect [dataSource]='items' [mode]='default' [fields]='fields'></ejs-multiselect> 
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 
    //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; 
    ngOnDestroy() { 
Could you please check the above details with sample and get back to us if you need any further assistance on this? 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon