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
Extending pTooltip Directive
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
Hi,
Can i see your code ? You can look for example in https://www.primefaces.org/primeng/#/tooltip
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.yigitfindikli wrote: ↑19 Nov 2018, 14:17Hi,
Can i see your code ? You can look for example in https://www.primefaces.org/primeng/#/tooltip
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;
}
}
Code: Select all
<span class="tooltip" #text [pTooltip]="tooltipText" [tooltipDisabled]="isDisabled" [tooltipPosition]="hoverPosition" [showDelay]="hoverDelay">
<ng-content></ng-content>
</span>
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() {
}
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 9 guests