Extending pTooltip Directive

UI Components for Angular
Post Reply
sruffatti
Posts: 3
Joined: 16 Nov 2018, 23:18

16 Nov 2018, 23:28

Hey folks,

First time posting to the forums. I am working on a project using primeng. I have a requirement to build "hover text". Here are the details, if the text content is larger than the width of its container, then I need to overflow the content with ellipsis, and put the original content into a primeng tooltip... The user will hover of the overflowed text and the primeng tooltip will pop up with the original text.

I had no problem building this as a component, however I think this would be easier to use if it were a component. I have never extended a directive before. I would love some advice and even maybe a few code examples for doing this.

I can post code for you as well. I appreciate any help I can get.

Thank you,
Sean

yigitfindikli
Posts: 36
Joined: 08 Aug 2018, 14:09

19 Nov 2018, 14:17

Hi,
Can i see your code ? You can look for example in https://www.primefaces.org/primeng/#/tooltip

sruffatti
Posts: 3
Joined: 16 Nov 2018, 23:18

20 Nov 2018, 15:25

yigitfindikli wrote:
19 Nov 2018, 14:17
Hi,
Can i see your code ? You can look for example in https://www.primefaces.org/primeng/#/tooltip
Let me reiterate my goal. If the content of a child element is greater than the offset width of its parent, it should overflow the text with an ellipsis, along with instantiate a primeng tooltip with the original text content of the child element.

I've achieved this as a component. Now I want to build it as a directive. I am not sure how to trigger the primeng tooltip without building it as a component.

Component.ts

Code: Select all

import { Component, OnInit, AfterContentInit, ViewChild, ElementRef, Input } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'ucc-hoverable-text',
  templateUrl: './hoverable-text.component.html',
  styleUrls: ['./hoverable-text.component.scss']
})
export class UccHoverTextComponent implements OnInit, AfterContentInit {

  isDisabled: boolean;

  @Input() hoverPosition;

  @Input() hoverDelay;

  @ViewChild('text') textElement: ElementRef;

  tooltipText: string;

  constructor() { }

  ngOnInit() {
    this.hoverPosition = this.hoverPosition || 'top';
    this.hoverDelay = this.hoverDelay || '500';
    this.isDisabled = true;
  }

  // Lifecycle hook - calls a method to initialize the tooltip
  ngAfterContentInit() {
    this.initializeTooltip();
  }

  // Checks if the child element's scroll width is greater than the offset width of its parent
  private initializeTooltip() {
    const parentElement = this.textElement.nativeElement.parentElement.parentElement;
    const childElement = this.textElement.nativeElement;
    if (childElement.scrollWidth > parentElement.offsetWidth) {
      this.isDisabled = false;
      this.setTooltipText(childElement.textContent);
    }
  }

  // Setter for tooltipText
  // param - string
  private setTooltipText(text: string): void {
    this.tooltipText = text;
  }
}
Component HTML

Code: Select all

<span class="tooltip" #text [pTooltip]="tooltipText" [tooltipDisabled]="isDisabled" [tooltipPosition]="hoverPosition" [showDelay]="hoverDelay">
    <ng-content></ng-content>
</span>
Directive (Work in progress)

Code: Select all

import { Directive, OnInit, ElementRef, NgZone, AfterContentInit, AfterViewInit } from '@angular/core';
import { Tooltip, DomHandler } from 'primeng/primeng';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[uccHoverText]',
  providers: [DomHandler],

})
export class HoverTextDirective extends Tooltip implements OnInit, AfterContentInit, AfterViewInit {

  constructor(public el: ElementRef, public dom: DomHandler, public zone: NgZone) {
    super(el, dom, zone);
  }

  ngOnInit() {
    this.tooltipPosition = 'top';
  }

  ngAfterContentInit() {
  }
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests