在angular 5中使用ng-select时如何添加工具提示？

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: 'adam@email.com', age: 12, country: 'United States' },
    { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
    { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
    { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
    { name: 'Natasha', email: 'natasha@email.com', 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

Use *ngFor to create options and give options the tooltip which you need. check this Example

Answer 2

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>