initial version

Author: clouless

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,13 @@
+.idea
+*.iml
+node_modules
+build
+dist
+library-build-chain
+documentation
+src/*.js
+src/components/*.js
+tsconfig-*.json
+yarn.lock
+_dist_demo_node_modules
+dist-demo

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 
+Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,2 +1,17 @@
+[![](https://cloukit.github.io/assets/images/cloukit-banner-github.svg?v3)](https://cloukit.github.io/)
+
 # tooltip
-A simple tooltip component
+
+
+ 
+
+### Usage
+
+**https://cloukit.github.io/#/component/tooltip**
+
+
+ 
+
+### License
+
+[MIT](https://github.com/cloukit/legal) © [Bernhard Grünewaldt](https://github.com/clouless)

package.json

@@ -0,0 +1,32 @@
+{
+  "COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHE TO NPMJS!",
+  "name": "@cloukit/tooltip",
+  "moduleId": "tooltip",
+  "version": "1.0.0",
+  "description": "A simple tooltip component",
+  "license": "MIT",
+  "author": "codelcou.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloukit/tooltip.git"
+  },
+  "scripts": {
+    "build": "node ./node_modules/@cloukit/library-build-chain/build.js",
+    "build:demo": "node ./node_modules/@cloukit/library-build-chain/build.js --demo --install",
+    "start:demo": "node ./node_modules/@cloukit/library-build-chain/build.js --demo --run",
+    "watch": "node ./node_modules/@cloukit/library-build-chain/build.js --watch",
+    "test": "echo \"ok\""
+  },
+  "dependencies": {
+    "@cloukit/dropout": "^1.0.1-alpha.6"
+  },
+  "devDependencies": {
+    "@cloukit/library-build-chain": "1.7.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=4.0.0",
+    "@angular/core": ">=4.0.0",
+    "rxjs": ">=5.0.0",
+    "zone.js": ">=0.8.0"
+  }
+}

src/components/children/tooltip.component.ts

@@ -0,0 +1,27 @@
+/*!
+ * @license MIT
+ * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
+ * https://github.com/cloukit/legal
+ */
+import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'cloukit-tooltip',
+  template: `
+  <ng-template #tooltip>
+    <div style="background-color:#333; padding:4px; color:#fff; font-family: sans-serif">
+      {{tooltipText}}
+    </div>
+  </ng-template>
+  `,
+})
+export class CloukitTooltipComponent {
+
+  @Input()
+  public tooltipText: string;
+
+  @ViewChild('tooltip')
+  public tooltipTemplate: TemplateRef<any>;
+
+}
+

src/components/tooltip.directive.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license MIT
+ * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
+ * https://github.com/cloukit/legal
+ */
+import {
+  Directive, Input, HostListener, ViewContainerRef, ComponentFactoryResolver,
+} from '@angular/core';
+import { DropoutService, DropoutComponentCreationRequest, DropoutComponentRefId, DropoutPlacement } from '@cloukit/dropout';
+import { CloukitTooltipComponent } from './children/tooltip.component';
+
+@Directive({
+  selector: '[cloukitTooltip]',
+})
+export class CloukitTooltipDirective {
+
+  @Input('cloukitTooltip')
+  cloukitDropout: string;
+
+  @Input('cloukitTooltipPlacement')
+  cloukitDropoutPlacement: DropoutPlacement = DropoutPlacement.HORIZONTAL_LEFT_BOTTOM;
+
+  private dropoutRef: DropoutComponentRefId;
+
+  constructor(private dropoutService: DropoutService,
+              private viewContainerRef: ViewContainerRef,
+              private componentFactoryResolver: ComponentFactoryResolver) {
+  }
+
+  _doActivate() {
+    const request = new DropoutComponentCreationRequest();
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(CloukitTooltipComponent);
+    const tooltipRef = this.viewContainerRef.createComponent(componentFactory);
+    tooltipRef.instance.tooltipText = this.cloukitDropout;
+    request.triggerElement = this.viewContainerRef.element.nativeElement;
+    request.template = tooltipRef.instance.tooltipTemplate;
+    request.placement = this.cloukitDropoutPlacement;
+    this.dropoutRef = this.dropoutService.requestDropoutCreation(request);
+  }
+
+  _doDeactivate() {
+    this.dropoutService.destroyComponent(this.dropoutRef);
+    this.dropoutRef = undefined;
+  }
+
+  @HostListener('focusin')
+  @HostListener('mouseenter')
+  activate() {
+    this._doActivate();
+  }
+
+  @HostListener('focusout')
+  @HostListener('mouseleave')
+  deactivate() {
+    this._doDeactivate();
+  }
+}

src/components/tooltip.module.ts

@@ -0,0 +1,18 @@
+/*!
+ * @license MIT
+ * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
+ * https://github.com/cloukit/legal
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CloukitDropoutModule } from '@cloukit/dropout';
+import { CloukitTooltipDirective } from './tooltip.directive';
+import { CloukitTooltipComponent } from './children/tooltip.component';
+
+@NgModule({
+  imports: [ CommonModule, CloukitDropoutModule ],
+  exports: [ CloukitTooltipDirective ],
+  declarations: [ CloukitTooltipDirective, CloukitTooltipComponent ],
+  entryComponents: [ CloukitTooltipComponent ],
+})
+export class CloukitTooltipModule {}

src/demo/README.md

@@ -0,0 +1,3 @@
+# Library Demo
+
+See https://github.com/cloukit/library-build-chain/blob/master/LIBRARY_DEMO.md

src/demo/demo.component.html

@@ -0,0 +1,10 @@
+<cloukit-dropout-outlet></cloukit-dropout-outlet>
+<div style="padding:30px;" class="demo">
+
+  There is a thing called
+  <span class="tooltip" cloukitTooltip="A very nice saussage">Bratwurst</span>
+  which you should know. Hover the
+  <span class="tooltip" cloukitTooltip="A very nice saussage">Bratwurst</span>
+  to see onmouseover dropout.
+
+</div>