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 78c1c7055e..11adfe077f 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,8 +21,7 @@ import { DiagramColorService } from '../../services/diagram-color.service';
 @Component({
     moduleId: module.id,
     selector: 'diagram-task',
-    templateUrl: './diagram-task.component.html',
-    styleUrls: ['./tooltip-style.css']
+    templateUrl: './diagram-task.component.html'
 })
 export class DiagramTaskComponent {
     @Input()
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
index 67a9b0ebcc..f4bf3704de 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
@@ -74,6 +74,7 @@ describe('Test ng2-activiti-diagrams ', () => {
     });
 
     describe('Diagrams component Events: ', () => {
+
         beforeEach(() => {
             jasmine.Ajax.install();
             component.processDefinitionId = 'fakeprocess:24:38399';
@@ -91,6 +92,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
                     expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -113,6 +117,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
                         ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
                     expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -136,6 +143,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
                         ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
                     expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -158,6 +168,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
                         ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
                     expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -180,6 +193,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
                         ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
                     expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -198,6 +214,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).toBeDefined();
                     let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
                     expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -220,6 +239,9 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
                         ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
                     expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -257,6 +279,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -282,6 +308,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -307,6 +337,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -348,6 +382,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -399,6 +437,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
                         ' raphael-icon-alfresco-publish');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -425,6 +467,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' +
                         ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -451,6 +497,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' +
                         ' raphael-icon-rest-call');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -477,6 +527,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconTask: any = element.querySelector('diagram-box-publish-task >' +
                         ' diagram-icon-box-publish-task > raphael-icon-box-publish');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -502,6 +556,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -527,6 +585,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -552,6 +614,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule');
                     expect(iconTask).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].name);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -586,6 +652,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
                     expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -607,6 +677,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
                     expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -628,6 +702,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
                     expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -659,6 +737,10 @@ describe('Test ng2-activiti-diagrams ', () => {
 
                     let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
                     expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -689,7 +771,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-intermediate-catching-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -700,6 +782,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -718,7 +804,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-intermediate-catching-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -729,6 +815,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-error');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -747,7 +837,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-intermediate-catching-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -758,6 +848,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-signal');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -776,7 +870,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-intermediate-catching-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -787,6 +881,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-message');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -817,7 +915,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-boundary-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -828,6 +926,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -846,7 +948,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-boundary-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -857,6 +959,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-error');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -875,7 +981,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-boundary-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -886,6 +992,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-signal');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -904,7 +1014,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-boundary-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -915,6 +1025,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-message');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -933,7 +1047,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-boundary-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -944,6 +1058,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-message');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -974,7 +1092,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-throw-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1003,7 +1121,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-throw-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1014,6 +1132,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-error');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1032,7 +1154,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-throw-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1043,6 +1165,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-signal');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1061,7 +1187,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-throw-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1072,6 +1198,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-message');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1090,7 +1220,7 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-throw-event');
                     expect(shape).not.toBeNull();
-                    expect(shape.children.length).toBe(3);
+                    expect(shape.children.length).toBe(4);
 
                     let outerCircle = shape.children[0];
                     expect(outerCircle.localName).toEqual('raphael-circle');
@@ -1101,6 +1231,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-message');
                     expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1131,6 +1265,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-subprocess > raphael-rect');
                     expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1149,6 +1287,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect');
                     expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
                 });
             });
             component.ngOnChanges();
@@ -1238,6 +1380,10 @@ describe('Test ng2-activiti-diagrams ', () => {
                     expect(res).not.toBeNull();
                     let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow');
                     expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.flows[0].id);
+                    expect(tooltip.textContent).toContain(res.flows[0].type);
                 });
             });
             component.ngOnChanges();
diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
index f001ef4e22..b5534067c6 100644
--- a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
@@ -22,6 +22,7 @@ export class DiagramModel {
     diagramWidth: string;
     elements: DiagramElementModel[] = [];
     flows: DiagramFlowElementModel[] = [];
+    pools: DiagramPoolElementModel[] = [];
 
     constructor(obj?: any) {
         if (obj) {
@@ -39,6 +40,11 @@ export class DiagramModel {
                     this.flows.push(new DiagramFlowElementModel(flow));
                 });
             }
+            if (obj.pools) {
+                obj.pools.forEach((pool: DiagramPoolElementModel) => {
+                    this.pools.push(new DiagramPoolElementModel(pool));
+                });
+            }
         }
     }
 }
@@ -55,17 +61,19 @@ export class DiagramElementModel {
     properties: DiagramElementPropertyModel[] = [];
     dataType: string = '';
     eventDefinition: DiagramEventDefinitionModel;
+    taskType: string = '';
 
     constructor(obj?: any) {
         if (obj) {
-            this.height = obj.height;
-            this.id = obj.id;
-            this.name = obj.name;
-            this.type = obj.type;
-            this.width = obj.width;
-            this.value = obj.value;
-            this.x = obj.x;
-            this.y = obj.y;
+            this.height = obj.height || '';
+            this.id = obj.id || '';
+            this.name = obj.name || '';
+            this.type = obj.type || '';
+            this.width = obj.width || '';
+            this.value = obj.value || '';
+            this.x = obj.x || '';
+            this.y = obj.y || '';
+            this.taskType = obj.taskType || '';
             if (obj.properties) {
                 obj.properties.forEach((property: DiagramElementPropertyModel) => {
                     this.properties.push(new DiagramElementPropertyModel(property));
@@ -140,3 +148,51 @@ export class DiagramEventDefinitionModel {
         }
     }
 }
+
+export class DiagramPoolElementModel {
+    height: string;
+    id: string;
+    name: string;
+    properties: any;
+    lanes: DiagramLaneElementModel[] = [];
+    width: string;
+    x: number;
+    y: number;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.height = obj.height;
+            this.id = obj.id;
+            this.name = obj.name;
+            this.properties = obj.properties;
+            this.width = obj.width;
+            this.x = obj.x;
+            this.y = obj.y;
+            if (obj.lanes) {
+                obj.lanes.forEach((lane: DiagramLaneElementModel) => {
+                    this.lanes.push(new DiagramLaneElementModel(lane));
+                });
+            }
+        }
+    }
+}
+
+export class DiagramLaneElementModel {
+    height: number;
+    id: string;
+    name: string;
+    width: number;
+    x: number;
+    y: number;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.height = obj.height;
+            this.id = obj.id;
+            this.name = obj.name;
+            this.width = obj.width;
+            this.x = obj.x;
+            this.y = obj.y;
+        }
+    }
+}