如何将 pTooltip 附加到 p-slider 的手柄（prime-ng 角度组件）

Question

我在 Angular 应用程序中使用 prime-ng 组件库。 我使用 p-slider 组件：

<p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue"></p-slider>

我想向 p 滑块手柄添加工具提示（粘贴并显示在手柄上方）。当我将 [pTootip] 指令添加到 p-slider 组件时，工具提示显示在滑块上，而不是手柄上。

<p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" [pTooltip]="rankItem.itemSliderNumber"></p-slider>

如何将工具提示粘贴到滑块的手柄上？

Answer 1

经过一番调查，我可以确认没有简单的解决方案。最后我扩展了 ng-prime 工具提示指令：

import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core';
import {DomHandler, Tooltip} from "primeng/primeng";

@Directive({
    selector: '[ext-tooltip]'
})

export class ExtendedTooltipDirective extends Tooltip implements AfterViewInit {

    @Input('ext-tooltip')
    _text: any;

    @Input('stickTo')
    stickTo: string;


    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2) {
        super(el, domHandler, renderer);
    }

    ngAfterViewInit(): void {
        this.el = new ElementRef(this.el.nativeElement.querySelector(this.stickTo));
    }
}

该指令可以用作工具提示指令，但它具有附加属性 StickTo，在可能的情况下使用查询来获取组件内的元素，工具提示应附加到该元素。对于 p-slider，我们可以使用 hanler 的类“.ui-slider-handle”。

<p-slider [ext-tooltip]="rankItem.itemSliderNumber" stickTo=".ui-slider-handle" tooltipPosition="top" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" ></p-slider>

prime-ng 工具提示的所有原始属性也可以使用。

Answer 2

在当前版本中，PrimeNG 原生支持此功能，无需任何扩展：

        <p-slider [(ngModel)]="daysAheadSelector" pTooltip="{{daysAheadSelector}}" styleClass="w-56" (onSlideEnd)="updateOlyMovements()" [min]="3" [max]="10" />