Question

我需要向PrimeNG Tree节点图标添加工具提示。如果有办法实现这一功能，请您建议我。

Answer 1

要实现您想要做的事情，您需要在您的primeng树中使用模板，如下所示：

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

您需要导入primeNG工具提示组件，以便在（模板内部）中使用它。 span中的工具提示将读取字符串变量desiredTooltip的内容，因此您需要在组件中声明它：

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

private desiredTooltip: string;

...

然后在鼠标进入或离开节点时编写修改变量的函数：

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

在mouseout上你可能想要清除工具提示。

Answer 2

您可以使用 title 属性（在Angular元素 ... 内）替代PrimeNG Tree节点工具提示。

HTML

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

PrimeNG树节点图标上的工具提示

2 个答案: