How to add Tooltip when use ng-select in angular 5?

Question

I have used ng-select in dropdown, when user mouseover the dropdown list, it should show tooltip. Code:

<label>Grouping</label>
  <ng-select [items]="accounts"
            bindLabel="name"
            bindValue="name"
            groupBy="country"
            [(ngModel)]="selectedAccount">
  </ng-select>

Component

 accounts = [
    { name: 'Adam', email: '[email protected]', age: 12, country: 'United States' },
    { name: 'Samantha', email: '[email protected]', age: 30, country: 'United States' },
    { name: 'Amalie', email: '[email protected]', age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
    { name: 'Adrian', email: '[email protected]', age: 21, country: 'Ecuador' },
    { name: 'Wladimir', email: '[email protected]', age: 30, country: 'Ecuador' },
    { name: 'Natasha', email: '[email protected]', age: 54, country: 'Ecuador' }
   
];    

Note: I need tooltip in ng-select dropdown list.

I tried with title attribute, but it not working.

Example:

When user mouse over the dropdown list, need to show ToolTip.

Question

How to add tootip in ng-select using angular5?

Your suggestion will helpful for me.

Answer 1

you can use ng-template to achive this

<ng-select [items]="accounts"
                bindLabel="name"
                bindValue="name"
                groupBy="country"
                [(ngModel)]="selectedAccount">

        <ng-template ng-option-tmp let-item="item">
        <div title="{{item.name}}">{{item.name}}</div>
        </ng-template>
    </ng-select>