PrimeNg-悬停时的 p-dropdown 工具提示

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

你试过绑定工具提示吗

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

希望对您有所帮助。

Answer 2

您可以使用 PrimeNG Tooltip along with template for the drop down (see Custom Content 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 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,
                    };
                });

PrimeNg-悬停时的 p-dropdown 工具提示

PrimeNg- p-dropdown tooltip on hover

angular

angular7

primeng

primeng-dropdowns