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

【问题标题】：PrimeNg- p-dropdown tooltip on hoverPrimeNg- 悬停时的 p 下拉工具提示
【发布时间】：2020-10-07 15:20:30
【问题描述】：

我的应用上有一个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 上硬编码一些文本，但仍然没有显示任何内容。

我在这里缺少什么？

【问题讨论】：

使用来自primefaces.org/primeng/showcase/#/dropdown的“自定义内容”
你能举个例子吗？我不知道该怎么做

标签： angular angular7 primeng primeng-dropdowns

【解决方案1】：

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

        <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,
                    };
                });

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：

【解决方案3】：

你有没有尝试绑定工具提示

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

希望对你有帮助。

【讨论】：

我也在寻找同样问题的答案