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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tooltip for each item selected in Multiselect dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

147821 Sep 25,2019 06:24 AM UTC Sep 26,2019 12:14 PM UTC Angular - EJ 2 1
loading
Tags: MultiSelectDropdown
Samir Modi
Asked On September 25, 2019 06:24 AM UTC

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 [Syncfusion]
Replied On 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, 
 
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(); 
    } 
} 
 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon