tooltip shows only once

[Toan Bui]

I am using tooltip for dropdownlist but when I close dropdownlist when reopening tooltip doesn't work

[Berly Christopher]

Hi Toan, 

  

Greetings from Syncfusion support. 

  

We can show the tooltip on hovering the list item with help of shared code example. We have modified the code example to achieve the requested requirement.  

  

 <ejs-dropdownlist id='employees' [dataSource]='data' [fields]='fields' [popupHeight]='height' 

            [placeholder]='watermark' (close)="onClose($event)"> 

            <ng-template #itemTemplate let-data> 

                <div> 

                    <ejs-tooltip #tooltip content="{{data.Name}}" position="TopCenter" 

                        (beforeOpen)='onBeforeOpen($event,tooltip)'> 

                        <span>{{data.Name}}</span> 

                    </ejs-tooltip> 

                </div> 

            </ng-template> 

        </ejs-dropdownlist> 

  public onClose(args) { 

    this.tooltip.close(); 

  } 

  onBeforeOpen(args,tooltip){ 

    this.tooltip = tooltip; 

  } 

 

  

Sample: https://stackblitz.com/edit/angular-wpodif-w6oqgn?file=app.component.ts  

  

Else, we can render the tooltip with help of JavaScript as mentioned in the below documentation link. 

UG: https://ej2.syncfusion.com/angular/documentation/drop-down-list/how-to/tooltip/  

  

Regards, 

Berly B.C 

[Toan Bui]

I found out that [allowFiltering]="true" causes the tooltip to show only once

[Berly Christopher]

Hi Toan, 

  

We suggest you to render the Tooltip component with help of JavaScript rendering to get rid of the reported issue. Kindly refer the below code example. 

  

  public allowFiltering = true; 

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

  } 

  // defined the array of data 

  public data: { [key: string]: Object }[] = [ 

    { id: '1', text: 'Australia', content: 'National sports is Cricket' }, 

    { id: '2', text: 'Bhutan', content: 'National sports is Archery' }, 

    { id: '3', text: 'China', content: 'National sports is Table Tennis' }, 

    { id: '4', text: 'Cuba', content: 'National sports is Baseball' }, 

    { id: '5', text: 'India', content: 'National sports is Hockey' }, 

    { id: '6', text: 'Spain', content: 'National sports is Football' }, 

    { id: '7', text: 'United States', content: 'National sports is Baseball' } 

  ]; 

  // maps the appropriate column to fields property 

  public fields: Object = { text: 'text', tooltip: 'Id' }; 

  //set the placeholder to DropDownList input 

  public text: string = 'Select a country'; 

  // close event 

  onClose(e: any) { 

    this.tooltip.close(); 

  } 

  //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 as any).content = (result[i] as any).content; 

        (this as any).dataBind(); 

        break; 

      } 

    } 

  } 

 

 

 

  

Sample: https://stackblitz.com/edit/angular-wpodif-rmvtc9?file=app.component.html  

  

Regards, 

Berly B.C 

[Sandeep Vaid]

1. With your javascript approach, if we have multiple dropdowns with tooltips, it doesnt work properly.
   
   https://stackblitz.com/edit/angular-wpodif-x8opyj?file=app.component.ts
2. With Angualr approach, how can we show tooltip on entire item hover (not just where item text is displayed) ?

[Berly Christopher]

Hi Sandeep, 

  

Query 1: 

  

With your javascript approach, if we have multiple dropdowns with tooltips, it doesnt work properly. 

  

Response: 

  

We have checked the shared sample and tooltip is displayed correctly. So, please share the issue replication procedure along with video demonstration that will help us to check and proceed further at our end.  

  

Query 2: 

  

With Angualr approach, how can we show tooltip on entire item hover (not just where item text is displayed)? 

  

Response: 

  

Can you please share the use case requirement elaborately that will help us to check and proceed further from our end with any pictorial demonstration? Also, please mention that which component you want to achieve the requested requirement with angular approach. 

  

Regards, 

Berly B.C