diff --git a/.github/workflows/helipopper.yml b/.github/workflows/helipopper.yml
index 9da433e..bafac0b 100644
--- a/.github/workflows/helipopper.yml
+++ b/.github/workflows/helipopper.yml
@@ -8,36 +8,21 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     strategy:
       fail-fast: true
 
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/cache@v3
-        id: npm-cache
-        with:
-          # We also specify `~/.cache` because Cypress binary is installed
-          # in that location.
-          path: |
-            node_modules
-            ~/.cache
-          key: ${{ runner.os }}-v1-npm-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: ${{ runner.os }}-v1-npm
-
-      - uses: actions/setup-node@v3
+      - name: Npm install
+        uses: actions/setup-node@v3
         with:
           node-version: 16
-
-      - name: Install dependencies
-        # If checksum for the `package-lock.json` hasn't changed then we shouldn't run
-        # `npm ci` because it will hit the `postinstall` hook
-        # that will run `ngcc` compiler accordingly.
-        if: steps.npm-cache.outputs.cache-hit != 'true'
+          cache: 'npm'
         env:
           HUSKY_SKIP_INSTALL: 'true'
-        run: npm ci
+      - run: npm i
 
       - name: Build library
         run: npm run build:lib
diff --git a/README.md b/README.md
index d5f6e3b..6178ddd 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ You have the freedom to [customize](https://atomiks.github.io/tippyjs/v6/themes/
 Import the standalone `TippyDirective` and use it in your templates:
 
 ```html
-<button tippy="Helpful Message">
+<button tp="Helpful Message">
   I have a tooltip
 </button>
 ```
@@ -95,7 +95,7 @@ export const tooltipVariation = {
 ### Use `TemplateRef` as content
 
 ```html
-<button [tippy]="tpl" variation="popper">
+<button [tp]="tpl" tpVariation="popper">
   Click Me
 </button>
 
@@ -117,7 +117,7 @@ class MyComponent {
 ```
 
 ```html
-<button [tippy]="MyComponent">
+<button [tp]="MyComponent">
   Click Me
 </button>
 ```
@@ -128,7 +128,7 @@ You can pass the `onlyTextOverflow` input to show the tooltip only when the host
 
 ```html
 <div style="max-width: 100px;" class="overflow-hidden flex">
-  <p class="ellipsis" [tippy]="text" placement="right" [onlyTextOverflow]="true">
+  <p class="ellipsis" [tp]="text" tpPlacement="right" [tpOnlyTextOverflow]="true">
     {{ text }}
   </p>
 </div>
@@ -141,7 +141,7 @@ Note that it's using [`ResizeObserver`](https://caniuse.com/resizeobserver) api.
 You can instruct tippy to use the element textContent as the tooltip content:
 
 ```html
-<p tippy useTextContent>
+<p tp tpUseTextContent>
   {{ text }}
 </p>
 ```
@@ -149,12 +149,12 @@ You can instruct tippy to use the element textContent as the tooltip content:
 
 ### Lazy
 
-You can pass the `lazy` input when you want to defer the creation of tippy only when the element is in the view:
+You can pass the `tpIsLazy` input when you want to defer the creation of tippy only when the element is in the view:
 
 ```html
 <div *ngFor="let item of items" 
-     [tippy]="item.label" 
-     [lazy]="true">{{ item.label }}
+     [tp]="item.label" 
+     [tpIsLazy]="true">{{ item.label }}
 </div>
 ```
 
@@ -196,9 +196,9 @@ Now you can use it in your template:
 
 <ul>
   <li *ngFor="let item of list" 
-      [tippy]="contextMenu" 
-      [data]="item" 
-      variation="contextMenu">
+      [tp]="contextMenu" 
+      [tpData]="item" 
+      tpVariation="contextMenu">
     {{ item.label }}
   </li>
 </ul>
@@ -207,7 +207,7 @@ Now you can use it in your template:
 ### Manual Trigger
 
 ```html
-<div tippy="Helpful Message" trigger="manual" #tooltip="tippy">
+<div tp="Helpful Message" tpTrigger="manual" #tooltip="tippy">
   Click Open to see me
 </div>
 
@@ -215,12 +215,12 @@ Now you can use it in your template:
 <button (click)="tooltip.hide()">Close</button>
 ```
 
-### Show/hide declarativly
+### Declarative show/hide
 
 Use isVisible to trigger show and hide. Set trigger to manual.
 
 ```html
-<div tippy="Helpful Message" trigger="manual" [isVisible]="visibility">
+<div tp="Helpful Message" tpTrigger="manual" [tpIsVisible]="visibility">
   Click Open to see me
 </div>
 
@@ -235,38 +235,42 @@ live [here](https://ngneat.github.io/helipopper/).
 ### Inputs
 
 ```ts
-appendTo: TippyProps['appendTo'];
-delay: TippyProps['delay'];
-duration: TippyProps['duration'];
-hideOnClick: TippyProps['hideOnClick'];
-interactive: TippyProps['interactive'];
-interactiveBorder: TippyProps['interactiveBorder'];
-maxWidth: TippyProps['maxWidth'];
-offset: TippyProps['offset'];
-placement: TippyProps['placement'];
-popperOptions: TippyProps['popperOptions'];
-showOnCreate: TippyProps['showOnCreate'];
-trigger: TippyProps['trigger'];
-triggerTarget: TippyProps['triggerTarget'];
-zIndex: TippyProps['zIndex'];
-tippyHost: HTMLElement;
-
-useTextContent: boolean;
-lazy: boolean;
-variation: string;
-isEnabled: boolean;
-isVisible: boolean;
-className: string;
-onlyTextOverflow: boolean;
-useHostWidth: boolean;
-hideOnEscape: boolean;
-data: any;
+tp: string | TemplateRef<any> | Type<any> | undefined | null;
+tpAppendTo: TippyProps['appendTo'];
+tpDelay: TippyProps['delay'];
+tpDuration: TippyProps['duration'];
+tpHideOnClick: TippyProps['hideOnClick'];
+tpInteractive: TippyProps['interactive'];
+tpInteractiveBorder: TippyProps['interactiveBorder'];
+tpMaxWidth: TippyProps['maxWidth'];
+tpOffset: TippyProps['offset'];
+tpPlacement: TippyProps['placement'];
+tpPopperOptions: TippyProps['popperOptions'];
+tpShowOnCreate: TippyProps['showOnCreate'];
+tpTrigger: TippyProps['trigger'];
+tpTriggerTarget: TippyProps['triggerTarget'];
+tpZIndex: TippyProps['zIndex'];
+tpAnimation: TippyProps['animation'];
+tpUseTextContent: boolean;
+tpIsLazy: boolean;
+tpVariation: string;
+tpIsEnabled: boolean;
+tpIsVisible: boolean;
+tpClassName: string;
+tpOnlyTextOverflow: boolean;
+tpData: any;
+tpUseHostWidth: boolean;
+tpHideOnEscape: boolean;
+tpDetectChangesComponent: boolean;
+tpPopperWidth: number | string;
+tpHost: HTMLElement;
+tpIsVisible: boolean;
 ```
 
 ### Outputs
 
 ```ts
-visible = new EventEmitter<boolean>();
+tpVisible = new EventEmitter<boolean>();
 ```
 
 ### Global Config
@@ -280,8 +284,8 @@ import { TippyService, TippyInstance } from '@ngneat/helipopper';
 
 class Component {
   @ViewChild('inputName') inputName: ElementRef;
+  tippy: TippyInstance;
   private tippyService = inject(TippyService);
-  tippy:TippyInstance;
 
   show() {
     if(!this.tippy) {
diff --git a/migrations/v7-migration.md b/migrations/v7-migration.md
new file mode 100644
index 0000000..df04b8c
--- /dev/null
+++ b/migrations/v7-migration.md
@@ -0,0 +1,168 @@
+# v7 Migration
+
+In v7 all the inputs of the `TippyDirective` are now prefixed with `tippy`.
+
+You can use the following search-n-replace script to help you migrate to the latest version:
+
+```js
+const glob = require('glob');
+const fs = require('node:fs');
+
+function getFiles(ext) {
+  return glob.sync(`**/*.${ext}`, {ignore: ['node_modules/**', 'dist/**', 'tmp/**', 'coverage/**']});
+}
+
+const files = getFiles('html').concat(getFiles('component.ts'));
+
+const inputMappings = [
+  [
+    "appendTo",
+    "tpAppendTo"
+  ],
+  [
+    "delay",
+    "tpDelay"
+  ],
+  [
+    "duration",
+    "tpDuration"
+  ],
+  [
+    "hideOnClick",
+    "tpHideOnClick"
+  ],
+  [
+    "interactive",
+    "tpInteractive"
+  ],
+  [
+    "interactiveBorder",
+    "tpInteractiveBorder"
+  ],
+  [
+    "maxWidth",
+    "tpMaxWidth"
+  ],
+  [
+    "offset",
+    "tpOffset"
+  ],
+  [
+    "placement",
+    "tpPlacement"
+  ],
+  [
+    "popperOptions",
+    "tpPopperOptions"
+  ],
+  [
+    "showOnCreate",
+    "tpShowOnCreate"
+  ],
+  [
+    "trigger",
+    "tpTrigger"
+  ],
+  [
+    "triggerTarget",
+    "tpTriggerTarget"
+  ],
+  [
+    "zIndex",
+    "tpZIndex"
+  ],
+  [
+    "animation",
+    "tpAnimation"
+  ],
+  [
+    "useTextContent",
+    "tpUseTextContent"
+  ],
+  [
+    "lazy",
+    "tpIsLazy"
+  ],
+  [
+    "variation",
+    "tpVariation"
+  ],
+  [
+    "isEnabled",
+    "tpIsEnabled"
+  ],
+  [
+    "className",
+    "tpClassName"
+  ],
+  [
+    "onlyTextOverflow",
+    "tpOnlyTextOverflow"
+  ],
+  [
+    "useHostWidth",
+    "tpUseHostWidth"
+  ],
+  [
+    "hideOnEscape",
+    "tpHideOnEscape"
+  ],
+  [
+    "detectChangesComponent",
+    "tpDetectChangesComponent"
+  ],
+  [
+    "popperWidth",
+    "tpPopperWidth"
+  ],
+  [
+    "customHost",
+    "tpHost"
+  ],
+  [
+    "isVisible",
+    "tpIsVisible"
+  ],
+  [
+    "data",
+    "tpData"
+  ],
+  [
+    "tippy",
+    "tp"
+  ]
+];
+const outputMapping = [['visible', 'tpVisible']];
+let updatedFiles = 0;
+
+for (const file of files) {
+  const content = fs.readFileSync(file, {encoding: "utf-8"});
+  if (!content.includes('tippy')) {
+    continue;
+  }
+
+  let updated = content;
+  for (const [prev, current] of inputMappings) {
+    const matcher = new RegExp(`(?<![\\w'"-\\.])${prev}(?![\\w'"-\\.])`, 'g');
+    updated = updated.replace(matcher, current);
+  }
+
+  for (const [prev, current] of outputMapping) {
+    const matcher = new RegExp(`\\(${prev}\\)`, 'g');
+    updated = updated.replace(matcher, `(${current})`);
+  }
+
+  if(updated !== content) {
+    updatedFiles++;
+  }
+
+  fs.writeFileSync(file, updated, {encoding: "utf-8"});
+}
+
+console.log(`Scanned a total of ${files.length} files and updated ${updatedFiles} of them.`);
+```
+
+Make sure you review which keywords are going to be matched since some previous tippy input 
+names might be used in other components in your system. (e.g. `data`).
+
+This script will help you with most of the replacements but please review the replaced files after running it.
diff --git a/projects/ngneat/helipopper/src/lib/tippy.directive.ts b/projects/ngneat/helipopper/src/lib/tippy.directive.ts
index 4b76387..4507c92 100644
--- a/projects/ngneat/helipopper/src/lib/tippy.directive.ts
+++ b/projects/ngneat/helipopper/src/lib/tippy.directive.ts
@@ -32,46 +32,42 @@ import { NgChanges, TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance, TippyPr
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[tippy]',
+  selector: '[tp]',
   exportAs: 'tippy',
   standalone: true
 })
 export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnInit {
-  static ngAcceptInputType_useTextContent: boolean | '';
-
-  @Input() appendTo: TippyProps['appendTo'];
-  @Input() delay: TippyProps['delay'];
-  @Input() duration: TippyProps['duration'];
-  @Input() hideOnClick: TippyProps['hideOnClick'];
-  @Input() interactive: TippyProps['interactive'];
-  @Input() interactiveBorder: TippyProps['interactiveBorder'];
-  @Input() maxWidth: TippyProps['maxWidth'];
-  @Input() offset: TippyProps['offset'];
-  @Input() placement: TippyProps['placement'];
-  @Input() popperOptions: TippyProps['popperOptions'];
-  @Input() showOnCreate: TippyProps['showOnCreate'];
-  @Input() trigger: TippyProps['trigger'];
-  @Input() triggerTarget: TippyProps['triggerTarget'];
-  @Input() zIndex: TippyProps['zIndex'];
-  @Input() animation: TippyProps['animation'];
-
-  @Input() useTextContent: boolean;
-  @Input() lazy: boolean;
-  @Input() variation: string;
-  @Input() isEnabled: boolean;
-  @Input() className: string | string[];
-  @Input() onlyTextOverflow = false;
-  @Input() data: any;
-  @Input() useHostWidth = false;
-  @Input() hideOnEscape = false;
-  @Input() detectChangesComponent = true;
-  @Input() popperWidth: number | string;
-
-  @Input('tippy') content: Content | undefined | null;
-  @Input('tippyHost') customHost: HTMLElement;
-
-  @Output() visible = new EventEmitter<boolean>();
-  @Input() public isVisible = false;
+  @Input('tp') content: Content | undefined | null;
+  @Input('tpAppendTo') appendTo: TippyProps['appendTo'];
+  @Input('tpDelay') delay: TippyProps['delay'];
+  @Input('tpDuration') duration: TippyProps['duration'];
+  @Input('tpHideOnClick') hideOnClick: TippyProps['hideOnClick'];
+  @Input('tpInteractive') interactive: TippyProps['interactive'];
+  @Input('tpInteractiveBorder') interactiveBorder: TippyProps['interactiveBorder'];
+  @Input('tpMaxWidth') maxWidth: TippyProps['maxWidth'];
+  @Input('tpOffset') offset: TippyProps['offset'];
+  @Input('tpPlacement') placement: TippyProps['placement'];
+  @Input('tpPopperOptions') popperOptions: TippyProps['popperOptions'];
+  @Input('tpShowOnCreate') showOnCreate: TippyProps['showOnCreate'];
+  @Input('tpTrigger') trigger: TippyProps['trigger'];
+  @Input('tpTriggerTarget') triggerTarget: TippyProps['triggerTarget'];
+  @Input('tpZIndex') zIndex: TippyProps['zIndex'];
+  @Input('tpAnimation') animation: TippyProps['animation'];
+  @Input('tpUseTextContent') useTextContent: boolean;
+  @Input('tpIsLazy') isLazy: boolean;
+  @Input('tpVariation') variation: string;
+  @Input('tpIsEnabled') isEnabled: boolean;
+  @Input('tpClassName') className: string | string[];
+  @Input('tpOnlyTextOverflow') onlyTextOverflow = false;
+  @Input('tpData') data: any;
+  @Input('tpUseHostWidth') useHostWidth = false;
+  @Input('tpHideOnEscape') hideOnEscape = false;
+  @Input('tpDetectChangesComponent') detectChangesComponent = true;
+  @Input('tpPopperWidth') popperWidth: number | string;
+  @Input('tpHost') customHost: HTMLElement;
+  @Input('tpIsVisible') isVisible = false;
+
+  @Output('tpVisible') visible = new EventEmitter<boolean>();
 
   protected instance: TippyInstance;
   protected viewRef: ViewRef;
@@ -150,7 +146,7 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
     if (isPlatformServer(this.platformId)) return;
 
     this.zone.runOutsideAngular(() => {
-      if (this.lazy) {
+      if (this.isLazy) {
         if (this.onlyTextOverflow) {
           inView(this.host)
             .pipe(
diff --git a/src/app/is-visible/isVisible.component.html b/src/app/is-visible/isVisible.component.html
index 8acde86..92afa7d 100644
--- a/src/app/is-visible/isVisible.component.html
+++ b/src/app/is-visible/isVisible.component.html
@@ -1,16 +1,16 @@
-<h6>Declaritive visibility (already set true before render in the component)</h6>
+<h6>Declarative visibility (already set true before render in the component)</h6>
 
 <div class="btn-container">
   <button
-    tippy="I'm a declarative tooltip"
-    variation="tooltip"
-    trigger="click"
-    className="declarativeTooltip"
+    tp="I'm a declarative tooltip"
+    tpVariation="tooltip"
+    tpTrigger="click"
+    tpClassName="declarativeTooltip"
     class="btn btn-outline-secondary"
-    [isVisible]="visibility"
+    [tpIsVisible]="visibility"
     data-cy="tippy-reference-declarative"
   >
-    Declaritive Tooltip
+    Declarative Tooltip
   </button>
 </div>
 
diff --git a/src/app/playground/playground.component.html b/src/app/playground/playground.component.html
index 141014d..54bdbe3 100644
--- a/src/app/playground/playground.component.html
+++ b/src/app/playground/playground.component.html
@@ -31,10 +31,10 @@
     <div class="btn-container">
       <button
         class="btn btn-outline-primary"
-        tippy="Helpful Message"
-        [placement]="tooltipPosition"
-        [variation]="tooltipType"
-        [hideOnEscape]="hideOnEsc"
+        tp="Helpful Message"
+        [tpPlacement]="tooltipPosition"
+        [tpVariation]="tooltipType"
+        [tpHideOnEscape]="hideOnEsc"
       >
         I have a tooltip
       </button>
@@ -46,7 +46,7 @@
   <h6>Default variation</h6>
 
   <div class="btn-container">
-    <button tippy="Default tooltip" class="btn btn-outline-secondary">Click Me</button>
+    <button tp="Default tooltip" class="btn btn-outline-secondary">Click Me</button>
   </div>
 
   <hr />
@@ -55,23 +55,19 @@ <h6>Default variation</h6>
     <h6>NIL values</h6>
 
     <div class="btn-container" id="tippy-value-non-nil">
-      <button
-        [tippy]="'I have a tooltip value different from nil'"
-        variation="popper"
-        class="btn btn-outline-secondary"
-      >
+      <button [tp]="'I have a tooltip value different from nil'" tpVariation="popper" class="btn btn-outline-secondary">
         Click me to see my tooltip
       </button>
     </div>
 
     <div class="btn-container" id="tippy-value-null">
-      <button [tippy]="null" variation="popper" class="btn btn-outline-secondary">
+      <button [tp]="null" tpVariation="popper" class="btn btn-outline-secondary">
         Click me but I won't show a tooltip
       </button>
     </div>
 
     <div class="btn-container" id="tippy-value-undefined">
-      <button [tippy]="undefined" variation="popper" class="btn btn-outline-secondary">
+      <button [tp]="undefined" tpVariation="popper" class="btn btn-outline-secondary">
         Click me but I won't show a tooltip
       </button>
     </div>
@@ -83,7 +79,7 @@ <h6>NIL values</h6>
     <h6>Custom Template</h6>
 
     <div class="btn-container" id="custom-template">
-      <button [tippy]="tpl" variation="popper" class="btn btn-outline-secondary" #tippy2="tippy">Click Me</button>
+      <button [tp]="tpl" tpVariation="popper" class="btn btn-outline-secondary" #tippy2="tippy">Click Me</button>
       Visible: {{ tippy2.isVisible }}
     </div>
 
@@ -97,7 +93,7 @@ <h6>Custom Template</h6>
 
     <h6>ng-container</h6>
     <div class="btn-container">
-      <button [tippy]="tpl2" variation="popper" class="btn btn-outline-secondary">Click Me</button>
+      <button [tp]="tpl2" tpVariation="popper" class="btn btn-outline-secondary">Click Me</button>
     </div>
 
     <ng-template #tpl2>
@@ -122,10 +118,10 @@ <h6>Custom Component</h6>
     <div class="btn-container">
       <button
         class="btn btn-outline-danger"
-        [tippy]="comp"
-        [data]="{ name: input.value }"
-        variation="popper"
-        (visible)="handleStatus($event)"
+        [tp]="comp"
+        [tpData]="{ name: input.value }"
+        tpVariation="popper"
+        (tpVisible)="handleStatus($event)"
       >
         Open component
       </button>
@@ -138,7 +134,7 @@ <h6>Custom Component</h6>
     <h6>Manual Trigger</h6>
 
     <div class="btn-container items-center">
-      <p tippy="Helpful Message" trigger="manual" #tippy="tippy" class="mr-4">Click open to see me</p>
+      <p tp="Helpful Message" tpTrigger="manual" #tippy="tippy" class="mr-4">Click open to see me</p>
 
       <button (click)="tippy.show()" class="btn btn-outline-dark">Open</button>
       <button (click)="tippy.hide()" class="btn btn-outline-dark">Close</button>
@@ -150,7 +146,7 @@ <h6>Manual Trigger</h6>
   <div id="lazy">
     <h6>Lazy</h6>
     <div style="height: 300px; overflow-y: auto">
-      <div *ngFor="let item of items" [tippy]="item.label" [lazy]="true">{{ item.label }}</div>
+      <div *ngFor="let item of items" [tp]="item.label" [tpIsLazy]="true">{{ item.label }}</div>
     </div>
   </div>
 
@@ -160,10 +156,10 @@ <h6>Lazy</h6>
     <h6>Disabled</h6>
 
     <div class="btn-container">
-      <button [isEnabled]="!isDisabled" tippy="Tooltip" class="btn btn-outline-dark">Element</button>
+      <button [tpIsEnabled]="isEnabled" tp="Tooltip" class="btn btn-outline-dark">Element</button>
     </div>
 
-    <button (click)="toggle()" class="btn btn-outline-primary btn-sm">{{ isDisabled ? 'Enable' : 'Disable' }}</button>
+    <button (click)="toggle()" class="btn btn-outline-primary btn-sm">{{ isEnabled ? 'Disable' : 'Enable' }}</button>
   </div>
 
   <hr />
@@ -173,7 +169,7 @@ <h6>Text Overflow</h6>
 
     <p>Start with overflow and change to not overflow</p>
     <div style="max-width: 100px;" class="overflow-hidden flex">
-      <p class="ellipsis" [tippy]="text" placement="right" [onlyTextOverflow]="true">
+      <p class="ellipsis" [tp]="text" tpPlacement="right" [tpOnlyTextOverflow]="true">
         {{ text }}
       </p>
     </div>
@@ -184,7 +180,7 @@ <h6>Text Overflow</h6>
 
     <p>Start with not overflow and change to overflow</p>
     <div [style.maxWidth.px]="maxWidth" class="overflow-hidden flex">
-      <p class="ellipsis" [tippy]="text" placement="right" [onlyTextOverflow]="true">
+      <p class="ellipsis" [tp]="text" tpPlacement="right" [tpOnlyTextOverflow]="true">
         {{ text }}
       </p>
     </div>
@@ -197,7 +193,7 @@ <h6>Text Overflow</h6>
   <h6>Show on Create</h6>
 
   <div class="btn-container">
-    <button tippy="Shown immediately when created" [showOnCreate]="true" class="btn btn-outline-secondary">
+    <button tp="Shown immediately when created" [tpShowOnCreate]="true" class="btn btn-outline-secondary">
       Show on Create
     </button>
   </div>
@@ -208,12 +204,12 @@ <h6>Declaritive visibility (already set true before render in the component)</h6
 
   <div class="btn-container">
     <button
-      tippy="I'm a declarative tooltip"
-      variation="tooltip"
-      trigger="click"
-      className="declarativeTooltip"
+      tp="I'm a declarative tooltip"
+      tpVariation="tooltip"
+      tpTrigger="click"
+      tpClassName="declarativeTooltip"
       class="btn btn-outline-secondary"
-      [isVisible]="visibility"
+      [tpIsVisible]="visibility"
       data-cy="tippy-reference-declarative"
     >
       Declaritive Tooltip
@@ -246,7 +242,13 @@ <h6>Using the Service</h6>
     <h6>Context menu</h6>
 
     <ul class="list-group">
-      <li class="list-group-item" *ngFor="let item of list" [tippy]="contextMenu" [data]="item" variation="contextMenu">
+      <li
+        class="list-group-item"
+        *ngFor="let item of list"
+        [tp]="contextMenu"
+        [tpData]="item"
+        tpVariation="contextMenu"
+      >
         {{ item.label }}
       </li>
     </ul>
@@ -261,9 +263,9 @@ <h6>Use host width</h6>
         style="flex: 1; max-width: 600px"
         type="text"
         placeholder="host width"
-        tippy="hello world"
-        variation="menu"
-        useHostWidth="true"
+        tp="hello world"
+        tpVariation="menu"
+        [tpUseHostWidth]="true"
       />
     </div>
   </div>
@@ -274,14 +276,14 @@ <h6>Use host width</h6>
     <h6>Menu</h6>
 
     <div class="dropdown">
-      <button class="btn btn-secondary dropdown-toggle" type="button" [tippy]="one" variation="menu">
+      <button class="btn btn-secondary dropdown-toggle" type="button" [tp]="one" tpVariation="menu">
         Dropdown button
       </button>
 
       <ng-template #one>
         <div>
           <a class="dropdown-item" href="#">Action</a>
-          <a class="dropdown-item" href="#" [tippy]="two" placement="right" variation="menu" trigger="mouseenter"
+          <a class="dropdown-item" href="#" [tp]="two" tpPlacement="right" tpVariation="menu" tpTrigger="mouseenter"
             >Another action</a
           >
           <a class="dropdown-item" href="#">Something else here</a>
@@ -292,7 +294,7 @@ <h6>Menu</h6>
         <div>
           <a class="dropdown-item" href="#">Action 2</a>
           <a class="dropdown-item" href="#">Another action 2</a>
-          <a class="dropdown-item" href="#" [tippy]="three" placement="right" variation="menu" trigger="mouseenter"
+          <a class="dropdown-item" href="#" [tp]="three" tpPlacement="right" tpVariation="menu" tpTrigger="mouseenter"
             >Something else here 2</a
           >
         </div>
@@ -312,26 +314,21 @@ <h6>Menu</h6>
 <div>
   <h6>Sanitize</h6>
 
-  <input
-    style="max-width: 600px"
-    type="text"
-    placeholder="Sanitize"
-    tippy="<img src='empty.gif' onerror='alert(1);' />"
-  />
+  <input style="max-width: 600px" type="text" placeholder="Sanitize" tp="<img src='empty.gif' onerror='alert(1);' />" />
 </div>
 
 <hr />
 
 <div>
   <h6>No Content</h6>
-  <input style="max-width: 600px" type="text" placeholder="No content" [tippy]="noContextText" />
+  <input style="max-width: 600px" type="text" placeholder="No content" [tp]="noContextText" />
 </div>
 
 <hr />
 
 <div>
   <h6>Use text content</h6>
-  <span tippy useTextContent>{{ text }}</span>
+  <span tp tpUseTextContent>{{ text }}</span>
 </div>
 
 <hr />
diff --git a/src/app/playground/playground.component.ts b/src/app/playground/playground.component.ts
index c82948b..72cceab 100644
--- a/src/app/playground/playground.component.ts
+++ b/src/app/playground/playground.component.ts
@@ -1,9 +1,7 @@
 import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
 import { UntypedFormBuilder } from '@angular/forms';
 import { ExampleComponent } from '../example/example.component';
-import { interval } from 'rxjs';
-import { finalize } from 'rxjs/operators';
-import { TippyInstance, TippyService } from '@ngneat/helipopper';
+import { TippyDirective, TippyInstance, TippyService } from '@ngneat/helipopper';
 
 @Component({
   selector: 'app-is-visible',
@@ -30,12 +28,10 @@ export class PlaygroundComponent {
 
   noContextText: string | undefined;
 
-  interval$ = interval(1000).pipe(finalize(() => console.log('interval completed')));
-
-  get tooltipPosition(): string {
+  get tooltipPosition() {
     const { position, alignment } = this.tooltipSettings.value;
 
-    return `${position}${alignment}`;
+    return `${position}${alignment}` as TippyDirective['placement'];
   }
 
   get tooltipType(): string {
@@ -56,8 +52,7 @@ export class PlaygroundComponent {
     label: `Value ${i + 1}`
   }));
 
-  thoughts = 'We just need someone to talk to 🥺';
-  isDisabled = false;
+  isEnabled = true;
   text = `Long Long All Text`;
   comp = ExampleComponent;
 
@@ -73,7 +68,7 @@ export class PlaygroundComponent {
   show = true;
 
   toggle() {
-    this.isDisabled = !this.isDisabled;
+    this.isEnabled = !this.isEnabled;
   }
 
   handleStatus($event: boolean): void {