[FIXED] PrimeNg- p-dropdown tooltip on hover

Issue

I have a p-dropdown component on my App. Its’ configured like this:

  <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>

I need to show the description for each target on Hover I read the PrimeNg documentation and says that the tooltip configuration does that. The problem is that I’m not seing anything:

enter image description here

What I need to see is something like this:

enter image description here

With the black tooltip on hover.

I already tried to hardcode some text on the tooltip and still doesn’t show anything.

What I’m missing here?

Solution

You could user 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>            

Answered By – RzoQe

Answer Checked By – Mildred Charles (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published