diff --git a/demo-shell-ng2/public/css/muli-font.css b/demo-shell-ng2/public/css/muli-font.css
index f4eff966d7..c237bd6952 100644
--- a/demo-shell-ng2/public/css/muli-font.css
+++ b/demo-shell-ng2/public/css/muli-font.css
@@ -1,6 +1,25 @@
 @font-face {
-    font-family: Muli;
+    font-family: "Muli";
+    src: url(../fonts/Muli-Light.ttf);
+}
+
+@font-face {
+    font-family: "Muli";
+    src: url(../fonts/Muli-LightItalic.ttf);
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Muli";
     src: url(../fonts/Muli-Regular.ttf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Muli";
+    src: url(../fonts/Muli-Italic.ttf);
+    font-weight: bold;
+    font-style: italic;
 }
 
 html, body {
diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
index af0ca38ed7..1aede1ee8c 100644
--- a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
+++ b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js
@@ -60,10 +60,19 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
+            }
             {
-                test: /\.component.scss$/,
-                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                test: /\.scss$/,
+                use: [{
+                    loader: "to-string-loader"
+                }, {
+                    loader: "raw-loader"
+                }, {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [ path.resolve(__dirname, '../../ng2-alfresco-core/styles')]
+                    }
+                }],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css
deleted file mode 100644
index 93868ce92c..0000000000
--- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.mdl-tooltip {
-    will-change: unset;
-}
-
-.mdl-tooltip-diagram {
-    background: white;
-    padding: 0px;
-}
-
-.mdl-tooltip-header__message {
-    background: black;
-    color: white;
-    margin-top: 0px;
-    margin-bottom: 3px;
-    width:100%;
-}
-
-.mdl-tooltip-body__message {
-    color: black;
-    text-align: center;
-}
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html
index c39f931559..844d45a436 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html
+++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html
@@ -1,6 +1,13 @@
-<div alfresco-mdl-tooltip class="mdl-tooltip--large mdl-tooltip-diagram" [attr.for]="data.id">
-    <div>
-        <div class="mdl-tooltip-header__message"><span>{{getTooltipHeader(data)}}</span></div>
-        <span class="mdl-tooltip-body__message">{{getTooltipMessage(data)}}</span>
+<div #tooltipContent class="{{adf}}-diagram-tooltip">
+    <div class="{{adf}}-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
+    <div class="{{adf}}-diagram-tooltip-body">
+        <div *ngIf="data.name">
+            <span class="{{adf}}-propertyName">Name:</span>
+            <span class="{{adf}}-propertyValue">{{ data.name }}</span>
+        </div>
+        <div *ngFor="let property of data.properties">
+            <span class="{{adf}}-propertyName">{{ property.name }}:</span>
+            <span class="{{adf}}-propertyValue">{{ property.value }}</span>
+        </div>
     </div>
 </div>
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss
new file mode 100644
index 0000000000..0717a0f0c5
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss
@@ -0,0 +1,74 @@
+@import 'theming';
+
+.#{$ADF} {
+    &-diagram-tooltip {
+        transform: scale(0);
+        transform-origin: top center;
+        z-index: 999;
+        display: inline-block;
+        font-weight: 500;
+        line-height: 14px;
+        font-size: 14px;
+        max-width: 300px;
+        position: fixed;
+        top: -500px;
+        left: -500px;
+        text-align: left;
+        will-change: unset;
+        border: 1px solid #c5c5c5;
+    }
+
+    &-diagram-tooltip.is-active {
+        animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+    }
+
+    &-diagram-tooltip-header {
+        background-color: rgba(43, 65, 79, 0.9);
+        color: #FFF;
+        padding: 8px;
+        font-weight: bold;
+        min-width: 200px;
+        line-height: 20px;
+    }
+
+    &-diagram-tooltip-body {
+        color: #4a4a4a;
+        background-color: rgba(255, 255, 255, 0.9);
+    }
+
+    &-diagram-tooltip-body > div {
+        padding: 4px 8px;
+    }
+
+    &-diagram-tooltip-body > div:first-child {
+        padding-top: 8px;
+    }
+
+    &-diagram-tooltip-body > div:last-child {
+        padding-bottom: 8px;
+    }
+
+    &-propertyName {
+        font-weight: bold;
+        margin-right: 5px;
+    }
+
+    &-propertyValue {
+        font-style: italic;
+    }
+}
+
+@keyframes tooltipAnimation {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(0.99);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+        visibility: visible;
+    }
+}
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
index bc0f1777bc..b5f0ba4c89 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts
@@ -15,24 +15,120 @@
  * limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
+const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'};
+const IS_ACTIVE_CLASS = 'is-active';
 
 @Component({
     selector: 'diagram-tooltip',
     templateUrl: './diagram-tooltip.component.html',
-    styleUrls: ['./diagram-tooltip-style.css']
+    styleUrls: ['./diagram-tooltip.component.scss']
 })
-export class DiagramTooltip {
+export class DiagramTooltip implements AfterViewInit, OnDestroy {
+
+    private tooltipElement: any;
+    private targetElement: any;
+    private boundMouseEnterHandler: EventListenerObject;
+    private boundMouseLeaveAndScrollHandler: EventListenerObject;
+    public adf: string = 'adf';
+
+    @ViewChild('tooltipContent') tooltipContent: ElementRef;
 
     @Input()
     data: any;
 
-    getTooltipHeader(data: any) {
-        let headerValue = data.name || data.id;
-        return data.type + ' ' + headerValue;
+    @Input()
+    position: string = 'bottom';
+
+    /**
+     * Set up event listeners for the target element (defined in the data.id)
+     */
+    public ngAfterViewInit() {
+        this.tooltipElement = this.tooltipContent.nativeElement;
+
+        if (this.data.id) {
+            this.targetElement = document.getElementById(this.data.id);
+        }
+
+        if (this.targetElement) {
+            if (!this.targetElement.hasAttribute('tabindex')) {
+                this.targetElement.setAttribute('tabindex', '0');
+            }
+
+            this.boundMouseEnterHandler = this.handleMouseEnter.bind(this);
+            this.boundMouseLeaveAndScrollHandler = this.hideTooltip.bind(this);
+            this.targetElement.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('touchend', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+            window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+            window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+        }
     }
 
-    getTooltipMessage(data: any) {
-        return (data.value !== undefined && data.value !== null ) ? data.value + ' ' + data.dataType : '';
+    /**
+     * Clear all bound eventlisteners
+     */
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+        window.removeEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+    }
+
+    /**
+     * Hides the tooltip
+     */
+    private hideTooltip(): void {
+        this.tooltipElement.classList.remove(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Shows the tooltip
+     */
+    private showTooltip(): void {
+        this.tooltipElement.classList.add(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Calculates the tooltip's position and displays it
+     *
+     * @param event mouseenter/touchend event
+     */
+    private handleMouseEnter(event): void {
+        const props = event.target.getBoundingClientRect(),
+            top = props.top + (props.height / 2),
+            marginLeft = -1 * (this.tooltipElement.offsetWidth / 2),
+            marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
+
+        let left = props.left + (props.width / 2);
+
+        if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) {
+            left = (props.width / 2);
+            if (top + marginTop < 0) {
+                this.tooltipElement.style.top = '0';
+                this.tooltipElement.style.marginTop = '0';
+            } else {
+                this.tooltipElement.style.top = top + 'px';
+                this.tooltipElement.style.marginTop = marginTop + 'px';
+            }
+        } else {
+            if (left + marginLeft < 0) {
+                this.tooltipElement.style.left = '0';
+                this.tooltipElement.style.marginLeft = '0';
+            } else {
+                this.tooltipElement.style.left = left + 'px';
+                this.tooltipElement.style.marginLeft = marginLeft + 'px';
+            }
+        }
+
+        if (this.position === POSITION.TOP) {
+            this.tooltipElement.style.top = props.top - this.tooltipElement.offsetHeight - 10 + 'px';
+        } else if (this.position === POSITION.RIGHT) {
+            this.tooltipElement.style.left = props.left + props.width + 10 + 'px';
+        } else if (this.position === POSITION.LEFT) {
+            this.tooltipElement.style.left = props.left - this.tooltipElement.offsetWidth - 10 + 'px';
+        } else {
+            this.tooltipElement.style.top = props.top + props.height + 10 + 'px';
+        }
+
+        this.showTooltip();
     }
 }
diff --git a/ng2-components/ng2-alfresco-core/styles/_theming.scss b/ng2-components/ng2-alfresco-core/styles/_theming.scss
index fc73a4d0db..4f758d6cc0 100644
--- a/ng2-components/ng2-alfresco-core/styles/_theming.scss
+++ b/ng2-components/ng2-alfresco-core/styles/_theming.scss
@@ -1,2 +1,3 @@
-@import './_variables-color.scss';
-@import './_variables-mdl-overrides.scss';
+@import './_variables-general';
+@import './_variables-color';
+@import './_variables-mdl-overrides';
diff --git a/ng2-components/ng2-alfresco-core/styles/_variables-general.scss b/ng2-components/ng2-alfresco-core/styles/_variables-general.scss
new file mode 100644
index 0000000000..db17d1e0dd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/styles/_variables-general.scss
@@ -0,0 +1 @@
+$ADF: adf;
\ No newline at end of file