How to show Syncfusion Tooltip for chip items

To display the Syncfusion tooltip for chip items, integrate the Syncfusion Angular Tooltip component. Set the tooltip target property as 'e-chip-text' and utilize the Tooltip component's beforeRender event to identify the relevant element within the Chips, extract its text content, and then assign it to the content of the Tooltip.

[app.component.html]

…
<ejs-tooltip #tooltip width="50px" target=".e-chip-text" (beforeRender)="onBeforeRender($event)" [content]="content">
  <ejs-chiplist id="chip-default">
      <e-chips>
          <e-chip text="Apple" cssClass="e-primary"></e-chip>
          <e-chip text="Microsoft" cssClass="e-info"></e-chip>
          <e-chip text="Google" cssClass="e-success"></e-chip>
          <e-chip text="Tesla" cssClass="e-warning"></e-chip>
          <e-chip text="Intel" cssClass="e-danger"></e-chip>
      </e-chips>
  </ejs-chiplist>
</ejs-tooltip>
…

[app.component.ts]

…
export class AppComponent {
    public content ="... Loading";
    onBeforeRender(args: any): void {
        const chipText = args.target.innerText;
        this.content=chipText;
      }
}

Sample: https://stackblitz.com/edit/angular-wxtrks-wkw11f?file=src%2Fapp.component.html