PrimeNg- p-dropdown tooltip on hover

Question

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:

What I need to see is something like this:

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?

use "Custom Content" from https://www.primefaces.org/primeng/showcase/#/dropdown — Ahmed ElMetwally, Jun 17 '20 at 18:02

score 4 · Accepted Answer · answered Jun 19 '20 at 09:44

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>

score 2 · Answer 2 · answered Aug 21 '21 at 19:18

The easiest thing to do was to do this -->

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

My requirement was to have a tooltip that dynamically changes it's value on hover over the dropdown options. Here is what I did in my TS file -

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

score 0 · Answer 3 · answered Jun 17 '20 at 17:47

0

Did you try binding tooltip

[tooltip]="getTargetDescription($event)" // This can be the reason.

I hope it helps.

answered Jun 17 '20 at 17:47

Abhinav Kumar

2,883
1
17
30

I am looking for the answer for the same issue too – Bravo Jun 18 '20 at 19:06

PrimeNg- p-dropdown tooltip on hover

3 Answers3