angular - 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工具提示以及下拉模板（请参阅此处的自定义内容）

<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)"// 这可能是原因。

我希望它有所帮助。

Answer 3

最简单的做法是这样做 -->

        <p-dropdown
            id="clientId"
            name="clientId"
            (onChange)="selectClient($event)"
            [options]="clientId"
            [style]="{ width: '100%' }"
            appendTo="body"
        >            
            <ng-template let-client pTemplate="item">
                <div [pTooltip]="client.testName" tooltipPosition="right">
                    {{ client.label }}
                </div>
            </ng-template>
        </p-dropdown>

我的要求是有一个工具提示，可以在将鼠标悬停在下拉选项上时动态更改其值。这是我在 TS 文件中所做的 -

 this.clientId = res.data.clients.map((client) => {
                    return {
                        label: client.clientName,
                        value: client.clientId,
                        testName: this.testConfig.testName,
                    };
                });