Tooltip for Multiselect dropdown in ejs-dialog

[Samir Modi]

Hi Team,

I have a multiselect control inside ejs-dialog. The datasource item texts are quite large in content. I need a way to show tooltip once we hover on each e-list-item.

This is what I tried - 

Template 

<ejs-multiselect id='indexMultiselect' #indexMultiselect [mode]='mode' placeholder='Type atleast 3 characters to search' filterType='contains' [dataSource]='expressions[index].attributeValues'

class="e-input" name="multiValue{{index}}" (filtering)='onFiltering($event,expressions[index])' [(ngModel)]="expressions[index].values"

required></ejs-multiselect>

On ngOnInit I initialized the tooltip 

this.indexToolTip = new Tooltip({

content: 'Loading..',

target: '.e-list-item',

beforeRender: this.onBeforeRenderIndexes

});

onBeforeRenderIndexes(args: TooltipEventArgs): void {

// get the target element

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

debugger;

if (listElement !== null) {

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

let i: number;

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

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

this.indexToolTip.content = result[i].toString()

this.indexToolTip.dataBind();

break;

}

}

}

}

First of all it shows loading for all multiselect within that page.Also, it shows loading on text hover for that particular mulitselect(attached image.zip). Can you check and point out the issue please.

Also, is there a way we can wrap the text as well for each item within multiselect. What should be the best way to handle such scenarios?

Thanks,

Samir

Attachment: image_496ff1a3.zip

[Sureshkumar P]

Hi Samir, 

 

Greetings from Syncfusion support. 

 

Based on your shared information with code example, we suspect that you did not initiate the content property used inside the onBeforeRenderIndexes method. We suggest you to initiate the content variable as like below to achieve your requirement. 

 

Kindly refer the below code example. 

public content; 

   

  public tooltip: Tooltip; 

  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'); 

  } 

  //beforeRender event of tooltip 

  onBeforeRender(args: TooltipEventArgs): void { 

    // get the target element 

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

    let result: Object[] = (listElement as any).ej2_instances[0].dataSource; 

    let i: number; 

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

      if ((result[i] as any).text === args.target.textContent) { 

        this.content = (result[i] as any).content; 

        break; 

      } 

    } 

  } 

 

 

We have created the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-ee9cui-7v28sg?file=app.component.ts  

 

Regards, 

Sureshkumar P 

[Samir Modi]

Thanks Sureshkumar. I tried your solution but the problem is that the Loading... content appears on every other dropdown/multiselect (i guess since we have target set as e-list-item while initializing tooltip). I only want this behaviour  for my specific multiselect dropdown.

Also, if i hover my multiselect dropdown and then hover to any other dropdown item, the previous multiselect text appears on hover for the other dropdown as well which is incorrect. 

How can we restrict this to the concerned multiselect present in ejs-dialog and not affect any other .

Thanks

[Sureshkumar P]

Hi Samir, 

 

Thanks for your update. 

 

We suggest you use the cssClass property to achieve your requirement. please find the code example here 

<ejs-multiselect id='ddltooltip' [cssClass]="classValue" #samples [dataSource]='data' [fields]='fields' 

    [placeholder]='text' (close)='onClose($event)'></ejs-multiselect> 

 

[sample.ts] 

 this.tooltip = new Tooltip({ 

            // default content of tooltip 

            content: 'Loading...', 

            // set target element to tooltip 

            target: '.customClass .e-list-item', 

            // set position of tooltip 

            position: 'TopCenter', 

            // bind beforeRender event 

            beforeRender: this.onBeforeRender 

        }); 

        this.tooltip.appendTo('body'); 

 

 

Please find the modified sample here: https://stackblitz.com/edit/angular-ee9cui-285ev2?file=app.component.ts  

 

To know more about cssClass property. please refer the API documentation link: https://ej2.syncfusion.com/angular/documentation/api/multi-select#cssclass  

 

Regards, 

Sureshkumar P 

[Samir Modi]

Thanks Sureshkumar, its working fine now after adding specific css

[Sureshkumar P]

Hi Samir, 

 

Thanks for your update, please get back to us if you need further assistance on this. 

 

Regards, 

Sureshkumar P