CODEWITHSUNDEEP
htmlcssangularprimeng
Mohan
Mohan

Reputation: 263

Tooltip on PrimeNG tree node icon

I have a requirement to add tooltip to PrimeNG Tree node icon. Could you please suggest me if there is a way to achieve this functionality.

Upvotes: 3

Views: 6795

Answers (3)

user18269645
user18269645

Reputation: 1

You can do this by template inside the p-tree element

HTML

   <p-tree 
    [value]="valuesList" 
    (onNodeSelect)="nodeSelect($event)" 
    (onNodeUnselect)="nodeUnselect($event)">
    <ng-template let-node  pTemplate="default">
       <span> {{ node.label}}
       <i class="pi pi-exclamation-circle" pTooltip="This is tooltip"   tooltipPosition="top">
       </i>
       </span>
    </ng-template>
    </p-tree>

Upvotes: 0

user14326242
user14326242

Reputation: 1

You may use title attribute(inside Angular element < ng-template >...</ ng-template >) as an alternative for the PrimeNG Tree node tooltip.

HTML

<p-tree [value]="tree"
   selectionMode="..."
   [(selection)]="...">
   <ng-template let-node pTemplate="default">
       <span title={{node.label}}>{{node.label}}</span>
   </ng-template>
</p-tree>

Upvotes: 0

Dino
Dino

Reputation: 1347

to achieve what you are trying to do you need to use a template inside your primeng tree like here:

<p-tree #tree [value]="assembliesTree"
    selectionMode="single"
    [pTooltip]="desiredTooltip"
    (mouseover)="nodeTooltipOver($event)"
    (mouseout)="nodeTooltipOut($event)"
    [(selection)]="..."
    (onNodeSelect)="..."
    (onNodeExpand)="..."
<template let-node pTemplate type="default">
    <span pTooltip="{{ desiredTooltip }}">{{ node.label }}</span>
</template>

You need to import the primeNG tooltip component so you can use it in (span inside the template). The tooltip inside the span will read the content of the string variable desiredTooltip, so you need to declare it in your component:

@Component({
    ...
})
export class ThreedViewerComponent implements AfterViewInit {

private desiredTooltip: string;

...

Then write the functions that modified the variable when the mouse enter or leave a node:

nodeTooltipOver(parameter) {
    if (parameter) {
        this.desiredTooltip = 'your tooltip';
    }
}

on mouseout you might want to clear the tooltip.

Upvotes: 4

Related Questions