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:

1. isEllipsisActive is not working, I need the way to identified the ellipsis.
2. I need to know how to add title or [title] attribute dynamically 
from $(this.el). The value is the text from the div.

Thanks!