CODEWITHSUNDEEP
angulartooltipdropdownprimeng
ShefZee
ShefZee

Reputation: 71

prime-ng tooltip on prime-ng dropdown

I need to display tooltip on drop down items on mouse hover. My html code is as below:-

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>

in app.component.ts

this.cities2 = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];

How can I achieve it? Any pointers please..

The above will show the tooltip directly in the field only.. How to show it in on every drop down items?

Upvotes: 1

Views: 4611

Answers (1)

ShefZee
ShefZee

Reputation: 71

I found a solution for this.

//Assume that carsNew of type Cars2 is the array you want to bind to the drop down. If you need to use ng-template with pdropdown,the array should be of type SelectedItem Interface.

interface cars2{
    code:string;
    description:string
  }

carsNew:cars2[];
carsNew2:SelectItem[] = [];

constructor() {
            this.carsNew=[
            {code:"ABC", description:"ABC Value"},
            {code:"DEF", description:"DEF Value"},
            {code:"GHI", description:"GHI Value"}
          ];
}

ngOnInit(): void {
   //read through carsNew2 and add it to carsNew2
    for(let c of this.carsNew){
      this.carsNew2.push({label: (c.code), value: (c.description)} )
    }
  }

<p-dropdown 
[options]="carsNew2"
[(ngModel)]="selectedCar2"
[style]="{'width':'50%'}"
scrollHeight="400px">
  <ng-template let-item pTemplate="selectedItem">
      {{(item.title) ? 'TODO' : item.label}}
  </ng-template>
  <ng-template let-car2 pTemplate="item">
    <div [pTooltip]="car2.value"> 

         <li><span class="item-value1">{{car2.label}}</span>
          </li> 
    </div>
  </ng-template>    
</p-dropdown>

Upvotes: 1

Related Questions