如何在 Angular 5 中使用 ng-select 时添加工具提示（Tooltip）？

Question

我在下拉菜单中使用了ng-select，当用户将鼠标悬停在下拉列表上时，应该显示提示框。

代码：

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

组件

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

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

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

示例：

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

问题

如何在使用angular5的ng-select中添加tootip？

您的建议对我很有帮助。

- RanjithKumar SV

---

可能是如何在@ng-select/ng-select选项上显示工具提示的重复问题。 - Aniket Avhad

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>

- Arash

---

谢谢你的回答。如果我们需要显示所选项目的标题怎么办？ - a.p. patel

Answer 2

使用*ngFor创建选项，并将选项添加所需的工具提示。 查看此示例。

- ferhado

---

谢谢你的回答。如果我们需要显示所选项目的标题怎么办？ - a.p. patel