diff --git a/README.md b/README.md
index 84e28b6..fabdb58 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,11 @@
-## Demo
+## Documentation & Demo
-[Example application](https://s8q4n.csb.app/)
+[Documentation](https://farengeyt451.github.io/ngx-tippy-wrapper/#/getting-started)
-[Code playground](https://codesandbox.io/s/ngx-tippy-wrapper-s8q4n)
+[Demo](https://farengeyt451.github.io/ngx-tippy-wrapper/#/demo)
## Recommended versions to use
@@ -34,791 +34,27 @@
Install from npm:
```js
-npm i ngx-tippy-wrapper --save
+npm i ngx-tippy-wrapper
```
-## Before upgrade
-
-[Migration guide](./MIGRATION_GUIDE.md)
-
-## Importing
-
-Import `NgxTippyModule`:
-
-```ts
-import { NgxTippyModule } from 'ngx-tippy-wrapper';
-```
-
-Then in your main or feature module:
-
-```ts
-@NgModule({
- imports: [
- ...,
- NgxTippyModule
- ],
- ...
-})
-```
-
-Import `tippy.css` style file to your main style file:
-
-```css
-@import 'tippy.js/dist/tippy.css';
-```
-
-or angular.json:
-
-```ts
-"architect": {
-"build": {
- ...,
- "options": {
- ...,
- "styles": [..., "./node_modules/tippy.js/dist/tippy.css"]
- }
-```
-
-## Usage
-
-### Basic usage
-
-Apply `ngxTippy` directive for element and pass content through `data-tippy-content` attribute:
-
-```html
-
-```
-
-### Applying props
-
-You can apply props with `tippyProps` binding
-
-In template:
-
-
-```html
-
-```
-
-
-Or pass `props` from component:
-
-```html
-
- Element with tooltip
-
-```
-
----
-
-```ts
-...
-import { NgxTippyProps } from 'ngx-tippy-wrapper';
-
-@Component({ ... })
-export class DemoComponent implements OnInit {
- tippyProps: NgxTippyProps = {
- trigger: 'click',
- allowHTML: true,
- };
- ...
-}
-```
-
-### Implemented props
-
-| Prop name | Type | Example |
-| ---------------- | --------------- | ---------------------------------------------------------------------------------- |
-| `tippyProps` | NgxTippyProps | [tippyProps]="{ arrow: false, placement: 'bottom' }" |
-| `tippyName` | string | tippyName="awesomeName" |
-| `tippyClassName` | string | tippyClassName="new-class"
_or_
tippyClassName="new-class another-class" |
-| `tippyContext` | NgxTippyContext | [tippyContext]="{ aKey: 'something' }" |
-
-`tippyProps` - [list of all props](https://atomiks.github.io/tippyjs/v6/all-props/)
-
-`tippyName` - name for tippy instance, required for accessing and control specific instance
-
-`tippyClassName` - add custom class to the `tippy-box` element, support multiple classes passed as words separated by space
-
-`tippyContext` - A way to bind any context you want to the template when using `ng-template`
-
-### Initializing on condition
-
-In some cases tooltip should be initialized conditionally. For example in case optional `@Input` property passed or not. So, if tooltip should be disabled on some conditions - you can explicitly pass `null` or `undefined` through `ngxTippy` directive.
-
-```ts
-...
-import { NgxTippyService } from 'ngx-tippy-wrapper';
-
-@Component({ ... })
-export class DemoComponent implements OnInit, AfterViewInit {
- @Input() inputContent?: string;
-}
-```
-
-```html
-
-
-or
-
-
-```
-
-### Applying content
-
-#### You can pass tooltip content through:
-
-1. **`data` attribute**:
-
-```html
-
-```
-
-2. **`content` prop** :
-
-```html
-
-```
-
-3. **passing content directly:**
-
-```html
-
-```
-
- 3.1 **passing some variable directly\*:**
-
-```html
-
-```
-
-```ts
-...
-import { NgxTippyService } from 'ngx-tippy-wrapper';
-
-@Component({ ... })
-export class DemoComponent implements OnInit, AfterViewInit {
- content: string = 'Tooltip content';
-
- setNewContentForTooltip() {
- this.content = 'Tooltip content'
- }
-}
-```
-
-_\*Tooltip content updates automatically_
-
-4. **`setContent()*` method** :
-
-```html
-
-```
-
----
-
-```ts
-...
-import { NgxTippyService } from 'ngx-tippy-wrapper';
-
-@Component({ ... })
-export class DemoComponent implements OnInit, AfterViewInit {
- boundContent: string = 'Bound tooltip content';
-
- constructor(private tippyService: NgxTippyService) {}
-
- ...
-
- ngAfterViewInit() {
- this.setContentForTooltip();
- }
-
- setContentForTooltip() {
- this.tippyService.setContent('content', this.boundContent);
- }
-}
-```
-
-\*_For this method `tippyName` should be defined_
-
-\*_This method can be used for dynamic applying content at any time, not only in lifecycle hooks_
-
-5. **`tippyProps`**:
-
-```html
-
-```
-
----
-
-```ts
-...
-@Component({ ... })
-export class DemoComponent implements OnInit {
- tippyProps: NgxTippyProps = { ... }
-
- ...
-
- ngOnInit() {
- this.setContentForTooltip();
- }
-
- setContentForTooltip() {
- this.tippyProps.content = 'Initial tooltip content'
- }
-}
-```
-
-6. **`ng-template`**:
-
-```html
-
-
-
- {{ name | json }}
- Content via ng-template, item's name = {{ item.name }}
-
-```
-
-_\*You can get `tippyName` using outlet context_
-
-7. **`HTML template`**
-
-```html
-
-
-
- HTML template
-
-```
-
-8. **`component`**:
-
-```html
-
-```
-
----
-
-```ts
-...
-import { TippyTemplateComponent } from "...";
-@Component({ ... })
-export class DemoComponent implements OnInit {
- public component = TippyTemplateComponent;
-}
-```
-
-9. **`element reference`**:
-
-- Pass `element reference` directly
-
-
-```html
-
-
-
-
Caption
-
Some content
-
- ...
-
-
-
-
-
-
Caption
-
Some content
-
- ...
-
-
-
-
-
Caption
-
Some content
- ...
-
-
-
-
-
-
+
+
+
Angular wrapper for tippy.js
+
+[](https://github.com/farengeyt451/ngx-tippy-wrapper/actions/workflows/actions.yml)
+[](https://app.codecov.io/gh/farengeyt451/ngx-tippy-wrapper/)
+[](https://github.com/farengeyt451/ngx-tippy-wrapper/blob/master/LICENSE)
+
+
+
+## Demo
+
+[Example application](https://s8q4n.csb.app/)
+
+[Code playground](https://codesandbox.io/s/ngx-tippy-wrapper-s8q4n)
+
+## Recommended versions to use
+
+- **Angular 14, 15, 16**: 6.x.x
+- **Angular 13**: 5.x.x
+- **Angular 12**: 4.x.x
+- **Angular 9, 10, 11** 3.x.x
+- **Angular 8**: 2.x.x
+
+## Installation
+
+Install from npm:
+
+```js
+npm i ngx-tippy-wrapper --save
+```
+
+## Before upgrade
+
+[Migration guide](./MIGRATION_GUIDE.md)
+
+## Importing
+
+Import `NgxTippyModule`:
+
+```ts
+import { NgxTippyModule } from 'ngx-tippy-wrapper';
+```
+
+Then in your main or feature module:
+
+```ts
+@NgModule({
+ imports: [
+ ...,
+ NgxTippyModule
+ ],
+ ...
+})
+```
+
+Import `tippy.css` style file to your main style file:
+
+```css
+@import 'tippy.js/dist/tippy.css';
+```
+
+or angular.json:
+
+```ts
+"architect": {
+"build": {
+ ...,
+ "options": {
+ ...,
+ "styles": [..., "./node_modules/tippy.js/dist/tippy.css"]
+ }
+```
+
+## Usage
+
+### Basic usage
+
+Apply `ngxTippy` directive for element and pass content through `data-tippy-content` attribute:
+
+```html
+
+```
+
+### Applying props
+
+You can apply props with `tippyProps` binding
+
+In template:
+
+
+```html
+
+```
+
+
+Or pass `props` from component:
+
+```html
+
+ Element with tooltip
+
+```
+
+---
+
+```ts
+...
+import { NgxTippyProps } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit {
+ tippyProps: NgxTippyProps = {
+ trigger: 'click',
+ allowHTML: true,
+ };
+ ...
+}
+```
+
+### Implemented props
+
+| Prop name | Type | Example |
+| ---------------- | --------------- | ---------------------------------------------------------------------------------- |
+| `tippyProps` | NgxTippyProps | [tippyProps]="{ arrow: false, placement: 'bottom' }" |
+| `tippyName` | string | tippyName="awesomeName" |
+| `tippyClassName` | string | tippyClassName="new-class"
_or_
tippyClassName="new-class another-class" |
+| `tippyContext` | NgxTippyContext | [tippyContext]="{ aKey: 'something' }" |
+
+`tippyProps` - [list of all props](https://atomiks.github.io/tippyjs/v6/all-props/)
+
+`tippyName` - name for tippy instance, required for accessing and control specific instance
+
+`tippyClassName` - add custom class to the `tippy-box` element, support multiple classes passed as words separated by space
+
+`tippyContext` - A way to bind any context you want to the template when using `ng-template`
+
+### Initializing on condition
+
+In some cases tooltip should be initialized conditionally. For example in case optional `@Input` property passed or not. So, if tooltip should be disabled on some conditions - you can explicitly pass `null` or `undefined` through `ngxTippy` directive.
+
+```ts
+...
+import { NgxTippyService } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit, AfterViewInit {
+ @Input() inputContent?: string;
+}
+```
+
+```html
+
+
+or
+
+
+```
+
+### Applying content
+
+#### You can pass tooltip content through:
+
+1. **`data` attribute**:
+
+```html
+
+```
+
+2. **`content` prop** :
+
+```html
+
+```
+
+3. **passing content directly:**
+
+```html
+
+```
+
+ 3.1 **passing some variable directly\*:**
+
+```html
+
+```
+
+```ts
+...
+import { NgxTippyService } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit, AfterViewInit {
+ content: string = 'Tooltip content';
+
+ setNewContentForTooltip() {
+ this.content = 'Tooltip content'
+ }
+}
+```
+
+_\*Tooltip content updates automatically_
+
+4. **`setContent()*` method** :
+
+```html
+
+```
+
+---
+
+```ts
+...
+import { NgxTippyService } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit, AfterViewInit {
+ boundContent: string = 'Bound tooltip content';
+
+ constructor(private tippyService: NgxTippyService) {}
+
+ ...
+
+ ngAfterViewInit() {
+ this.setContentForTooltip();
+ }
+
+ setContentForTooltip() {
+ this.tippyService.setContent('content', this.boundContent);
+ }
+}
+```
+
+\*_For this method `tippyName` should be defined_
+
+\*_This method can be used for dynamic applying content at any time, not only in lifecycle hooks_
+
+5. **`tippyProps`**:
+
+```html
+
+```
+
+---
+
+```ts
+...
+@Component({ ... })
+export class DemoComponent implements OnInit {
+ tippyProps: NgxTippyProps = { ... }
+
+ ...
+
+ ngOnInit() {
+ this.setContentForTooltip();
+ }
+
+ setContentForTooltip() {
+ this.tippyProps.content = 'Initial tooltip content'
+ }
+}
+```
+
+6. **`ng-template`**:
+
+```html
+
+
+
+ {{ name | json }}
+ Content via ng-template, item's name = {{ item.name }}
+
+```
+
+_\*You can get `tippyName` using outlet context_
+
+7. **`HTML template`**
+
+```html
+
+
+
+ HTML template
+
+```
+
+8. **`component`**:
+
+```html
+
+```
+
+---
+
+```ts
+...
+import { TippyTemplateComponent } from "...";
+@Component({ ... })
+export class DemoComponent implements OnInit {
+ public component = TippyTemplateComponent;
+}
+```
+
+9. **`element reference`**:
+
+- Pass `element reference` directly
+
+
+```html
+
+
+
+
Caption
+
Some content
+
+ ...
+
+
+
+
+
+
Caption
+
Some content
+
+ ...
+
+
+
+
+
Caption
+
Some content
+ ...
+
+
+
+
+
+