add basic tooltip

app/sass/component/global/_tooltip.sass

@@ -0,0 +1,21 @@
++component(tooltip)
+
+  position: fixed
+  background-color: $granny-green
+  color: $snow-white
+  padding: .5em 1.5em
+  border-radius: 3px
+  transform: translateX(-50%)
+
+  &:after
+
+    content: ''
+    position: absolute
+    left: 50%
+    top: 100%
+    transform: translateX(-50%)
+    width: 0
+    height: 0
+    border-style: solid
+    border-width: 10px 10px 0 10px
+    border-color: $granny-green transparent transparent transparent

app/sass/style.scss

@@ -0,0 +1,19 @@
+@import 'ext/reset';
+@import 'ext/variables';
+@import 'ext/mixins';
+@import 'ext/fonts';
+
+@import 'component/global/container';
+@import 'component/global/button';
+@import 'component/global/button-bar';
+@import 'component/global/message';
+@import 'component/global/tooltip';
+
+@import 'component/tree/tree';
+@import 'component/tree/node';
+
+@import 'component/flash/flash-box';
+@import 'component/flash/flash-message';
+
+@import 'component/team/team';
+@import 'component/team/team-form';

app/templates/node.html

@@ -6,6 +6,7 @@
           '--highlighted': node.highlighted,
           '--winner': node.last && node.team
         }"
+        tooltip="Hello"
         [overlay]="node"
         (click)="node.win()">
   {{ node.team ? node.team.name : '-' }}</button>

app/templates/team-management.html

@@ -20,6 +20,5 @@
 
 <ul>
   <li>Edit Team name</li>
-  <li>Winner in gold</li>
   <li>Remove all team button</li>
 </ul>

app/ts/Components/NodeComponent.ts

@@ -2,11 +2,12 @@ import {Component} from "angular2/core";
 import {Input} from "angular2/core";
 import {NodeModel} from "../Models/NodeModel";
 import {OverlayDirective} from "../Directives/OverlayDirective";
+import {TooltipDirective} from "../Directives/TooltipDirective";
 
 @Component({
   selector: 'node',
   templateUrl: 'app/templates/node.html',
-  directives: [NodeComponent, OverlayDirective]
+  directives: [NodeComponent, OverlayDirective, TooltipDirective]
 })
 
 export class NodeComponent {

app/ts/Directives/TooltipDirective.ts

@@ -0,0 +1,49 @@
+import {Directive} from "angular2/core";
+import {Input} from "angular2/core";
+import {ElementRef} from "angular2/core";
+import {el} from "angular2/testing_internal";
+
+@Directive({
+  selector: '[tooltip]',
+  host: {
+    '(mouseenter)': 'show()',
+    '(mouseleave)': 'hide()'
+  }
+})
+export class TooltipDirective {
+
+  @Input('tooltip') text: string;
+
+  private _tooltip: HTMLElement;
+
+  constructor(
+    private _element: ElementRef
+  ) {}
+
+  show(): void {
+    var el = this._element.nativeElement;
+    let position = el.getBoundingClientRect();
+    let top = position.top - position.height - 10;
+    let left = position.right - (position.width/2);
+
+    this._tooltip = this.getTooltipDom();
+
+    el.appendChild(this._tooltip);
+
+    this._tooltip.style.left = left + 'px';
+    this._tooltip.style.top = top + 'px';
+  }
+
+  hide(): void {
+    this._element.nativeElement.removeChild(this._tooltip);
+  }
+
+  private getTooltipDom(): HTMLElement {
+    let string: string = '<div class="tooltip">' + this.text + '</div>';
+    let div: HTMLElement = document.createElement('div');
+
+    div.innerHTML = string;
+
+    return div.firstChild;
+  }
+}

gulpfile.js

@@ -15,7 +15,7 @@ var staticFiles = [
 ];
 
 gulp.task('sass', function () {
-  gulp.src(appFolder + 'sass/style.sass')
+  gulp.src(appFolder + 'sass/style.scss')
       .pipe(sass().on('error', sass.logError))
       .pipe(gulp.dest(distFolder + 'css'))
       .pipe(connect.reload());