How to show tooltip on @ng-select/ng-select options

This question is old, but using span could be another solution:

<ng-select placeholder="Select" (change)="onChange($event)">
    <ng-option *ngFor="let list of listArray" 
       title="{{list.name}}"><span [title]="list.name">{{list.name}}</span></ng-option>
</ng-select>

you can achieve tooltip solution using below code

<ng-select [items]="listArray" bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
    <div title="{{item.name}}">{{item.name}}</div>
    </ng-template>
</ng-select>

Thanks

You can use @ng-bootstrap/ng-bootstrap library to display a tooltip in parallel with ng-select:

template:

<ng-select [ngbTooltip]="tipContent" container="body" placement="bottom" placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray" title="{{list.name}}"> {{list.name}}  
     </ng-option>
</ng-select>

<ng-template #tipContent>{{listArray[0].name}}</ng-template>

ts:

listArray = [
    {name: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
];

Demo

I added a demo using only bootstrap with no external libraries. Hover on the options to see the tooltip (takes a couple of seconds until it is displayed): New Demo

You can put a template inside the <ng-option>, and add the directive ng-option-tmp:

<ng-select [items]="listArrayManyElements" placeholder="Select" [(ngModel)]="Selected" 
           bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
        <div [title]="item.name">{{item.name}}</div>
    </ng-template>
</ng-select>

I've updated your stackblitz