adding tooltip to listbox

[Deepika]

Hi Team,

I want to add tooltip to listbox, data in listbox is coming from an API, content of tooltip should be same as data displayed in listbox,
I have gone through these links but it's not working for me.

https://www.syncfusion.com/forums/156100/adding-image-beside-list-items-in-listbox

https://stackblitz.com/edit/angular-r4ajvf-wsgers?file=app.component.ts

Code : 

<ejs-listbox #metricslist id="metricslist" height='150px' [dataSource]='metricsListData'

                        formControlName="metricsList" [selectionSettings]="selection" [fields]='fields'

                        [class.disabledbutton]="disableMetricList" (change)="OnListItemSelect($event)">

                    </ejs-listbox>

 OnListItemSelect(args) {

    if (args.event.type === 'click') {

      let selectedItem = args.items;

      let selectedItemFormula = selectedItem.map(function (selectedItem) { return "[ " + selectedItem.name + " ]" })

      this.previousState.push(this.formula);

      if (this.formula.length < this.maxlength) {

        this.formula = (this.formula + selectedItemFormula).split("").slice(0, this.maxlength).join("");

      }

}

}

so how can I add tooltip for the list box in my code.

Thanks,

Deepika.P

[Mohan Kumar Ramasamy]

Hi Deepika, 

 

We have checked reported query, we can achieve your requirement using ngAfterViewChecked. Please refer the below sample link. 

 

Link: https://stackblitz.com/edit/angular-r4ajvf-mmmkeq?file=app.component.ts  

 

Please let us know if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Deepika]

Thank you Mohan. 

 

The below code worked for me.

ngOnInit(): void {

this.getMetricListData();

}

 ngAfterViewInit() {

    this.tooltip = new Tooltip({

      content: "Loading...",

      target: ".e-custom-tooltip",

      beforeRender: this.onBeforeRender

    });

    this.tooltip.appendTo("body");

  }

  ngAfterViewChecked() {

    this.metricListTooltip();

  }

  onBeforeRender(args: TooltipEventArgs): void {

    this.content = args.target.textContent;

  }

 metricListTooltip(): void {

    if (this.metricsListData.length > 0) {

      let listLi = document.querySelector("#metricslist").querySelectorAll("li");

      let i: number;

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

        var mySpan = document.getElementById("mySpan");

        mySpan.innerText = (listLi[i] as any).innerText;

        listLi[i].classList.add("e-custom-tooltip");

      }

    }

  }

[Mohan Kumar Ramasamy]

Hi Deepika,   

  

Thanks for the update.  

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohankumar R