diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
index fe7f52ec74..e12b4a1b20 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
@@ -1,4 +1,10 @@
-<raphael-rect [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
+<raphael-rect [elementId]="data.id" [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
               [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
               [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
-<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
\ No newline at end of file
+<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
+<div class="mdl-tooltip mdl-tooltip--large" [attr.for]="data.id">
+    <div>
+        <h6 class="mdl-tooltip-header__message"><span>{{data.name}}</span></h6>
+        <span class="mdl-tooltip-body__message">0 hours</span>
+    </div>
+</div>
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
index 11adfe077f..78c1c7055e 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
@@ -21,7 +21,8 @@ import { DiagramColorService } from '../../services/diagram-color.service';
 @Component({
     moduleId: module.id,
     selector: 'diagram-task',
-    templateUrl: './diagram-task.component.html'
+    templateUrl: './diagram-task.component.html',
+    styleUrls: ['./tooltip-style.css']
 })
 export class DiagramTaskComponent {
     @Input()
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css b/ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css
new file mode 100644
index 0000000000..ec0cf8b717
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css
@@ -0,0 +1,19 @@
+.mdl-tooltip {
+    will-change: unset;
+}
+
+.mdl-tooltip-diagram {
+    background: white;
+    padding: 0px;
+}
+
+.mdl-tooltip-header__message {
+    background: black;
+    color: white;
+    margin-top: 0px;
+    width:100%;
+}
+
+.mdl-tooltip-body__message {
+    color: black;
+}
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts
index d4b147f914..e2b9fecac1 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts
@@ -20,7 +20,7 @@ import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
 import { RaphaelService } from './raphael.service';
 
-@Directive({selector: 'raphael-rect'})
+@Directive({ selector: 'raphael-rect' })
 export class RaphaelRectDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,6 +49,9 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
+    @Input()
+    elementId: string;
+
     @Output()
     onError = new EventEmitter();
 
@@ -59,8 +62,14 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
 
     ngOnInit() {
         console.log(this.elementRef);
-        let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
-        this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
+        let opts = {
+            'stroke-width': this.strokeWidth,
+            'fill': this.fillColors,
+            'stroke': this.stroke,
+            'fill-opacity': this.fillOpacity
+        };
+        let elementDraw = this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
+        elementDraw.node.id = this.elementId;
     }
 
     public draw(leftCorner: Point, width: number, height: number, radius: number, opts: any) {