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

Question

我在下拉列表中使用了 ng-select，当用户将鼠标悬停在下拉列表上时，它应该显示工具提示。 代码：

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

组件

 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' }
   
];    

注意： 我需要 ng-select 下拉列表中的工具提示。

我尝试使用 title 属性，但它不起作用。

例子：

当用户将鼠标悬停在下拉列表上时，需要显示工具提示。

问题

如何使用 angular5 在 ng-select 中添加提示？

你的建议对我有帮助。

Answer 1

你可以使用 ng-template 来实现这个

<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>

Answer 2

使用*ngFor 创建options 并为选项提供您需要的工具提示。check this Example