primeng 下拉菜单上的 primeng 工具提示答案

【问题标题】：prime-ng tooltip on prime-ng dropdownprimeng 下拉菜单上的 primeng 工具提示
【发布时间】：2026-01-26 12:30:01
【问题描述】：

我需要在鼠标悬停时在下拉项目上显示工具提示。我的html代码如下：-

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>

in app.component.ts

this.cities2 = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];

我怎样才能实现它？请大家指点一下。。

以上将仅在字段中直接显示工具提示。如何在每个下拉项目中显示它？

【问题讨论】：

标签： angular tooltip dropdown primeng

【解决方案1】：

我找到了解决方案。

//假设Cars2 类型的carsNew 是要绑定到下拉列表的数组。如果你需要使用 ng-template 和 pdropdown，数组应该是 SelectedItem 接口类型。

interface cars2{
    code:string;
    description:string
  }

carsNew:cars2[];
carsNew2:SelectItem[] = [];

constructor() {
            this.carsNew=[
            {code:"ABC", description:"ABC Value"},
            {code:"DEF", description:"DEF Value"},
            {code:"GHI", description:"GHI Value"}
          ];
}

ngOnInit(): void {
   //read through carsNew2 and add it to carsNew2
    for(let c of this.carsNew){
      this.carsNew2.push({label: (c.code), value: (c.description)} )
    }
  }

<p-dropdown 
[options]="carsNew2"
[(ngModel)]="selectedCar2"
[style]="{'width':'50%'}"
scrollHeight="400px">
  <ng-template let-item pTemplate="selectedItem">
      {{(item.title) ? 'TODO' : item.label}}
  </ng-template>
  <ng-template let-car2 pTemplate="item">
    <div [pTooltip]="car2.value"> 

         <li><span class="item-value1">{{car2.label}}</span>
          </li> 
    </div>
  </ng-template>    
</p-dropdown>

【讨论】：