Ionic Advanced Tooltip (@phazric/ionic-adv-tooltip)

Rich, media-friendly tooltip/popover for Ionic Angular: render templates, images, videos, or even a live component preview inside a lightweight tooltip.
Works on any host (span, ion-item, ion-chip, ion-button, ...).
Angular 16–20 · Ionic 6–8

---

✨ Features

• 🧩 Drop-in directive: iatTooltip (template) or iatTooltipText (plain text)
• 🖼️ Rich content: images, videos, GIFs, arbitrary HTML
• 🧪 Component preview: render any Angular component inside the tooltip
• 🎯 Positioning: top | bottom | left | right | auto, with start | center | end alignment
• 🕒 Timings: open delay, close delay, optional auto-hide on touch
• 🖱️ Click-through by default (tooltips don’t block target clicks)
• 🧱 Standalone or NgModule friendly
• ⚙️ Type-safe API and small footprint

---

📦 Installation

npm i ionic-adv-tooltip

Then import the directive:

import { AdvTooltipDirective } from 'ionic-adv-tooltip';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [AdvTooltipDirective],
  templateUrl: './demo.component.html',
})
export class DemoComponent {}

---

🚀 Usage Examples

1️⃣ Simple text tooltip

<ion-button iatTooltipText="Save changes">
  <ion-icon name="save-outline"></ion-icon>
</ion-button>

2️⃣ Template-based tooltip

<ion-chip [iatTooltip]="tpl">Hover me</ion-chip>

<ng-template #tpl>
  <img src="assets/preview.png" width="120">
  <div>Preview image</div>
</ng-template>

3️⃣ Component tooltip

<div
  [iatEnableComponent]="true"
  [iatComponent]="TestComponent"
  [iatComponentInputs]="{ title: 'Hello Tooltip' }"
  [iatDirection]="'right'"
  [iatMaxWidth]="260"
  >
  Hover here
</div>

import { Component} from '@angular/core';
import { AdvTooltipDirective } from 'ionic-adv-tooltip';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [AdvTooltipDirective], 
  templateUrl: './home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  protected  TestComponent = TestComponent

}

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  standalone: true,
  styleUrls: ['./test.component.scss'],
})
export class TestComponent  implements OnInit {
  @Input() title: string = 'Default title';

  constructor() { }

  ngOnInit() {}

}

If you are using NgModules instead of standalone components, make sure you also import the directive and the preview component in the parent module where the tooltip is used:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { AdvTooltipDirective } from 'ionic-adv-tooltip';
import { TestComponent } from '../test/test.component';

@NgModule({
  declarations: [HomePage],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AdvTooltipDirective,
    TestComponent
  ]
})
export class HomePageModule {}

---

⚙️ Directive Inputs

Parameter	Description
iatTooltip	Rich content via Angular ng-template (images, HTML, etc.). Use [iatTooltip]="myTpl".
iatTooltipText	Plain text tooltip content.
iatEnableComponent	Enables live Angular component rendering inside tooltip.
iatComponent	Component type to render when iatEnableComponent is true.
iatComponentInputs	Object containing inputs for the rendered component.
iatInteractive	If true, tooltip is clickable; otherwise pointer-events are disabled (default).
iatOpenDelay	Delay before opening (ms). Default: 150.
iatCloseDelay	Delay before closing (ms). Default: 0.
iatAutoHideMs	Auto-hide timeout (ms) after touch open. Use 0 to disable. Default: 1800.
iatMaxWidth	Legacy width (px). Prefer iatPopoverWidth for precise sizing. Default: 280.
iatDirection	Tooltip side: 'auto', 'top', 'bottom', 'left', 'right'. Default: 'auto'.
iatAlign	Alignment: 'start', 'center', 'end'. Default: 'center'.
iatPopoverBg	Background color (e.g., '#222', rgba(...), or var(--ion-color-light)).
iatPopoverWidth	Tooltip width (number = px, or string with CSS units like '28rem', '80vw').
iatPopoverMinWidth	Minimum width.
iatPopoverMaxWidth	Maximum width.
iatPopoverHeight	Tooltip height (number or CSS string).
iatPopoverMinHeight	Minimum height.
iatPopoverMaxHeight	Maximum height.
iatEnter	Enter animation: 'fade', 'scale', 'up', 'right', 'pop'.
iatExit	Exit animation: 'fade', 'scale', 'down', 'left', 'shrink'.
iatAnimDurationMs	Animation duration (ms). Default: 180.
iatAnimEasing	Animation easing (e.g., 'cubic-bezier(.2,.8,.2,1)').

---

🧱 Backward Compatibility

Alias	Maps to
appTooltip	→ iatTooltip
appTooltipText	→ iatTooltipText
appTooltipDelay	→ iatOpenDelay
appTooltipCloseDelay	→ iatCloseDelay
appTooltipAutoHideMs	→ iatAutoHideMs
appTooltipMaxWidth	→ iatMaxWidth
appTooltipDirection	→ iatDirection
appTooltipAlign	→ iatAlign

---

🧩 Compatibility

• ✅ Angular 16 → 20
• ✅ Ionic 6 → 8
• ✅ Works in Standalone Components and NgModules
• ✅ SSR-safe (no direct DOM assumptions)

---

📜 License

MIT © Phazric