PrimeNg - всплывающая подсказка при наведении курсора

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 вместе с шаблоном для раскрывающегося списка (см. Пользовательское содержимое здесь )

<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)" // Это может быть причиной.

Надеюсь, это поможет.