How to activate tooltip when ellipsis is activated using a directive in angular 5?
11,986
Solution 1
You can create this directive:
import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from
'@angular/core';
@Directive({
selector: '[isEllipsisActive]'
})
export class IsEllipsisActiveDirective implements AfterViewInit {
constructor(private elementRef: ElementRef) {}
ngAfterViewInit(): void {
setTimeout(() => {
const element = this.elementRef.nativeElement;
if(element.offsetWidth < element.scrollWidth){
element.title = element.innerHTML;
}
}, 500);
}
}
take a look on this https://stackblitz.com/edit/angular-qjmg7m?file=src%2Fapp%2Fis-ellipsis-active.directive.ts
Solution 2
Great answer by ofir - Here's a modified version that will work if text changes after initialization.
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[isEllipsisActive]'
})
export class isEllipsisActiveDirective {
constructor(private elementRef: ElementRef) {}
@HostListener('mouseenter')
onMouseEnter(): void {
setTimeout(() => {
const element = this.elementRef.nativeElement;
if (element.offsetWidth < element.scrollWidth) {
element.title = element.textContent;
}
else if (element.title) element.removeAttribute('title');
}, 500);
}
}
Author by
user2304483
Updated on June 26, 2022Comments
-
user2304483 about 2 years
I have the following template with a "dotdotdot" css class which add ellipsis on overflow correctly.
<div class="dotdotdot">{{data.trip.name}}</div>
What I'm trying to do here is to implement a directive which add a tooltip when the ellipsis is activated only.
Here is the current code from the directive:
import { Directive, OnInit, ElementRef } from '@angular/core'; declare var $: any; @Directive({ selector: '.dotdotdot' }) export class DotdotdotDirective implements OnInit { private el: HTMLElement; constructor(elRef: ElementRef) { this.el = elRef.nativeElement; } ngOnInit() { if (this.isEllipsisActive(this.el)) { // TODO add title attribute to the div with value from text $(this.el).tooltip(); } } isEllipsisActive(e) { return (e.offsetWidth < e.scrollWidth); } }
I have two problems in the code above:
- isEllipsisActive is not working, I need the way to identified the ellipsis.
- I need to know how to add title or [title] attribute dynamically from $(this.el). The value is the text from the div.
Thanks!
-
tao almost 6 yearsPossible duplicate of HTML text-overflow ellipsis detection
-
ConnorsFan almost 6 yearsIt works without jQuery. See this stackblitz.
-
Laoujin over 5 yearsA bit more robust answer can be found here. It works with
ngAfterViewChecked
so nosetTimeout
required + also clears the title if it is not necessary anymore when theinnerText
changes.
-
Jorge Avila over 4 yearswould this work for Mobile or I have to implement other way ?
-
Jimeh over 2 yearsThe setTimeout isn't necessary but great idea. Helped me out a lot.