v2.0

drozhzhin-n-e · May 4, 2018 · 08b101b · 08b101b
1 parent ee3b4ee
commit 08b101b
Show file tree

Hide file tree

Showing 11 changed files with 486 additions and 240 deletions.
diff --git a/README.md b/README.md
@@ -1,39 +1,33 @@
-Angular2 tooltip directive.
+Angular tooltip directive.
 
 ## Installation
 
-1 Install the npm package.
+Install the npm package.
 
     npm i ng2-tooltip-directive
         
-2 Import `Ng2Module`:
+Import `Ng2Module`:
 
-    import { TooltipDirective } from 'ng2-tooltip-directive/components';
+    import { TooltipModule } from 'ng2-tooltip-directive';
      
     @NgModule({
-        declarations: [ TooltipDirective ]
+        imports: [ TooltipModule ]
     }) 
 
-3 Add CSS styles
-
-Example CSS: http://crystalui.org/components/tooltip#css-styles
 
 ## Usage
 
     <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
 
 ## Properties
 
-| name             | type                                | description                                 |
-|------------------|-------------------------------------|---------------------------------------------|
-| placement        | "top", "bottom", "left", "right"    | The position of the tooltip.                |
-| show-delay       | number                              | The delay in ms before showing the tooltip. |
-| hide-delay       | number                              | The delay in ms before removing the tooltip.|
-| z-index          | number                              | Z-index of the tooltip.                     |
-| hover            | boolean                             | Set to none to trigger the tooltip with a click. Control the closing time with `hide-delay`. `true` by default|
-
-## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.
+| name             | type                                | default | description                                 |
+|------------------|-------------------------------------|---------|---------------------------------------------|
+| placement        | "top", "bottom", "left", "right"    | "top"   | The position of the tooltip.                |
+| show-delay       | number                              | 0       | The delay in ms before showing the tooltip. |
+| hide-delay       | number                              | 300     | The delay in ms before removing the tooltip.|
+| z-index          | number                              | 0       | Z-index of the tooltip.                     |
+| trigger          | "hover", "click"                    | "hover" | Specifies how the tooltip is triggered. Control the closing time with "hide-delay". |
 
 ## Demo
 http://crystalui.org/components/tooltip
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,30 @@
 <h1>Demo</h1>
 
-<button tooltip="Tooltip" placement="top" style="margin: 10px 10px 10px 0;">Tooltip on top</button>
-<button tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." placement="bottom" style="margin: 10px 10px 10px 0;">Tooltip on bottom</button>
-<button tooltip="Tooltip" placement="left" style="margin: 10px 10px 10px 0;">Tooltip on left</button>
-<button tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." placement="right" delay="500" style="margin: 10px 10px 10px 0;">Tooltip on right, delay 500ms</button>
-<button tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." [hover]="false" hide-delay="1500" placement="top" style="margin: 10px 10px 10px 0;">Click me</button>
+<button 
+	tooltip="Tooltip" 
+	placement="top" 
+	style="margin: 10px 10px 10px 0;">Tooltip on top</button>
+<button 
+	tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." 
+	placement="bottom" 
+	style="margin: 10px 10px 10px 0;">Tooltip on bottom</button>
+<button 
+	tooltip="Tooltip" 
+	placement="left" 
+	style="margin: 10px 10px 10px 0;">Tooltip on left</button>
+<button 
+	tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." 
+	placement="right" 
+	show-delay="500" 
+	style="margin: 10px 10px 10px 0;">Tooltip on right, show delay 500ms</button>
+<button 
+	tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." 
+	placement="right" 
+	hide-delay="500" 
+	style="margin: 10px 10px 10px 0;">Tooltip on right, hide delay 500ms</button> 
+<button 
+	tooltip="Lorem ipsum dolor sit amet, his ut dicunt recteque ea." 
+	placement="top" 
+	trigger="click" 
+	hide-delay="1000" 
+	style="margin: 10px 10px 10px 0;">Click me, hide delay 1s</button>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,15 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { TooltipDirective } from './tooltip.directive';
+import { TooltipModule } from './tooltip/tooltip.module';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    TooltipDirective
+    AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    TooltipModule
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/tooltip.directive.ts b/src/app/tooltip.directive.ts
diff --git a/src/app/tooltip/tooltip.component.css b/src/app/tooltip/tooltip.component.css
@@ -0,0 +1,51 @@
+:host {
+  max-width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 8px;
+  position: absolute;
+  z-index: 1000;
+  display: block;
+  opacity: 0;
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
+  -o-transition: opacity 300ms;
+  transition: opacity 300ms; }
+
+:host.tooltip-show {
+  opacity: 1; }
+
+:host.tooltip::after {
+  content: "";
+  position: absolute;
+  border-style: solid; }
+
+:host.tooltip-top::after {
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: black transparent transparent transparent; }
+
+:host.tooltip-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent black transparent; }
+
+:host.tooltip-left::after {
+  top: 50%;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent black; }
+
+:host.tooltip-right::after {
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent black transparent transparent; }
diff --git a/src/app/tooltip/tooltip.component.html b/src/app/tooltip/tooltip.component.html
@@ -0,0 +1 @@
+{{value}}
diff --git a/src/app/tooltip/tooltip.component.sass b/src/app/tooltip/tooltip.component.sass
@@ -0,0 +1,51 @@
+\:host
+    max-width: 200px
+    background-color: black
+    color: #fff
+    text-align: center
+    border-radius: 6px
+    padding: 5px 8px
+    position: absolute
+    z-index: 1000
+    display: block
+    opacity: 0
+    -webkit-transition: opacity 300ms
+    -moz-transition: opacity 300ms
+    -o-transition: opacity 300ms
+    transition: opacity 300ms
+
+\:host.tooltip-show
+    opacity: 1
+
+\:host.tooltip::after
+    content: ""
+    position: absolute
+    border-style: solid
+
+\:host.tooltip-top::after 
+    top: 100%
+    left: 50%
+    margin-left: -5px
+    border-width: 5px
+    border-color: black transparent transparent transparent
+
+\:host.tooltip-bottom::after
+    bottom: 100%
+    left: 50%
+    margin-left: -5px
+    border-width: 5px
+    border-color: transparent transparent black transparent
+
+\:host.tooltip-left::after
+    top: 50%
+    left: 100%
+    margin-top: -5px
+    border-width: 5px
+    border-color: transparent transparent transparent black
+
+\:host.tooltip-right::after 
+    top: 50%
+    right: 100%
+    margin-top: -5px
+    border-width: 5px
+    border-color: transparent black transparent transparent