CODEWITHSUNDEEP
angularprimeng
alex-exelweb
alex-exelweb

Reputation: 31

How to attach pTooltip to p-slider's handle (prime-ng angular components)

I'm using prime-ng components library in my Angular application. I use p-slider component:

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

And I want to add tooltip to the p-slider handle (to be sticked and displayed above the handle). When I add [pTootip] directive to the p-slider component, tooltip displays over the slider, not the handle.

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

How to stick the tooltip to the slider's handle?

Upvotes: 1

Views: 3405

Answers (2)

d00d
d00d

Reputation: 763

In the current version this is natively supported by PrimeNG without any extensions:

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

Upvotes: 0

alex-exelweb
alex-exelweb

Reputation: 31

After some investigation, I can confirm that there is no simple solution. Finally I extended the ng-prime tooltip directive:

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));
    }
}

This directive can be used as the tooltip directive, but it has additional propery stickTo, where possible to use query to get element inside component, to which the tooltip should be attached. For p-slider we can use hanler's class ".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>

All original properties of the prime-ng tooltip can also be used.

Upvotes: 2

Related Questions