悬停时的PrimeNg-p下拉工具提示

Question

我的应用程序上有一个p-dropdown组件。其配置如下：

  <p-dropdown
                 [showTransitionOptions]="'0ms'"
                 [hideTransitionOptions]="'0ms'"
                 dropdownIcon="fa fa-angle-down"
                (onChange)="onChangePrimaryTarget($event)"
                 [options]="targetsLookup"
                 formControlName="target"
                 placeholder="Select a Primary Target"
                 tooltip="'getTargetDescription($event)'">
</p-dropdown>

我需要在Hover上显示每个目标的描述，我阅读了PrimeNg文档，并说tooltip配置可以做到这一点。问题是我什么都没做：

我需要看的是这样的：

将黑色tooltip悬停。

我已经尝试在tooltip上对一些文本进行硬编码，但仍然没有显示任何内容。

我在这里缺少什么？

Answer 1

您可以使用PrimeNG Tooltip以及下拉模板（请参阅自定义内容here）

<p-dropdown
    [showTransitionOptions]="'0ms'"
    [hideTransitionOptions]="'0ms'"
    dropdownIcon="fa fa-angle-down"
    (onChange)="onChangePrimaryTarget($event)"
    [options]="targetsLookup"
    formControlName="target"
    placeholder="Select a Primary Target">
        <ng-template let-item pTemplate="selectedItem">
            <span style="vertical-align:middle">{{item.label}}</span>
        </ng-template>
        <ng-template let-target pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height:25px;" pTooltip="{{getTargetDescription(target)}}" tooltipPosition="top">
                <span style="font-size:14px;float:right;margin-top:4px">{{target.label}}</span>
            </div>
        </ng-template>
</p-dropdown>            

Answer 2

您尝试绑定工具提示

[tooltip]="getTargetDescription($event)" //这可能是原因。

我希望这会有所帮助。