Tooltip on PrimeNG tree node icon

Question

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.

Answer 1

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.