diff --git a/README.md b/README.md
index e18ae61..63be889 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ import { TooltipsModule } from 'ionic-tooltips';
...
imports: [
...
- TooltipsModule
+ TooltipsModule.forRoot()
]
})
export class MyModule { ... }
@@ -135,14 +135,16 @@ Note: This only works when the `event` attribute is omitted.
#### `topOffset`
-(number) add this attribute to offset the vertical position of the tooltip. Defaults to 0.
+(number) add this attribute to offset the vertical position of the tooltip. Defaults to `0`.
#### `leftOffset`
-(number) add this attribute to offset the horizontal position of the tooltip. Defaults to 0.
-
+(number) add this attribute to offset the horizontal position of the tooltip. Defaults to `0`.
+#### `hideOthers`
+(boolean) add this attribute to set weather to hide other visible tooltips. Defaults to `false`.
+
## Versioning
diff --git a/src/index.ts b/src/index.ts
index ac8c19a..7b62e37 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
export * from './tooltip-box.component';
export * from './tooltip.directive';
-export * from './tooltips.module';
\ No newline at end of file
+export * from './tooltips.module';
+export * from './tooltip.cotroller';
diff --git a/src/tooltip.cotroller.ts b/src/tooltip.cotroller.ts
new file mode 100644
index 0000000..4a05b99
--- /dev/null
+++ b/src/tooltip.cotroller.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Tooltip } from './tooltip.directive';
+
+@Injectable()
+export class TooltipController {
+ allowMultiple: boolean = true;
+ activeTooltips: Tooltip[] = [];
+
+ addTooltip(instance: Tooltip) {
+ if(instance.hideOthers || !this.allowMultiple && this.activeTooltips.length > 0) {
+ this.hideAll();
+ }
+ this.activeTooltips.push(instance);
+ }
+
+ removeTooltip(instance: Tooltip) {
+ this.activeTooltips.splice(this.activeTooltips.indexOf(instance), 1);
+ }
+
+ hideAll() {
+ this.activeTooltips.forEach((tooltip: Tooltip) => {
+ tooltip.removeTooltip();
+ });
+ }
+}
diff --git a/src/tooltip.directive.ts b/src/tooltip.directive.ts
index 787c809..a4f1583 100644
--- a/src/tooltip.directive.ts
+++ b/src/tooltip.directive.ts
@@ -14,6 +14,7 @@ import {
import { Platform } from 'ionic-angular';
import { TooltipBox } from './tooltip-box.component';
+import { TooltipController } from './tooltip.cotroller';
@Directive({
selector: '[tooltip]',
@@ -37,6 +38,8 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
@Input() leftOffset: number;
+ @Input() hideOthers: boolean;
+
@Input()
set navTooltip(val: boolean) {
this._navTooltip = typeof val !== 'boolean' || val !== false;
@@ -60,7 +63,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
@Input()
set active(val: boolean) {
this._active = typeof val !== 'boolean' || val !== false;
- this._active ? this.canShow && this.showTooltip() : this._removeTooltip();
+ this._active ? this.canShow && this.showTooltip() : this.removeTooltip();
}
get active(): boolean {
@@ -79,6 +82,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
private appRef: ApplicationRef,
private platform: Platform,
private _componentFactoryResolver: ComponentFactoryResolver,
+ private tooltipCtrl: TooltipController
) {
}
@@ -160,7 +164,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
if (!this._active) {
this.tooltipTimeout = setTimeout(
- this._removeTooltip.bind(this),
+ this.removeTooltip.bind(this),
this.duration,
);
}
@@ -203,6 +207,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
);
this.tooltipElement = viewport.createComponent(componentFactory);
+ this.tooltipCtrl.addTooltip(this);
}
private _getTooltipPosition() {
@@ -268,7 +273,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
};
}
- private _removeTooltip() {
+ removeTooltip() {
if (!this.tooltipElement) {
this.tooltipElement = undefined;
this.tooltipTimeout = undefined;
@@ -287,6 +292,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
) {
this.tooltipElement.destroy();
}
+ this.tooltipCtrl.removeTooltip(this);
this.tooltipElement = this.tooltipTimeout = undefined;
this.canShow = true;
}, 300);
@@ -302,6 +308,6 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
ngOnDestroy() {
// if the timer hasn't expired or active is true when the component gets destroyed, the tooltip will remain in the DOM
// this removes it
- this._removeTooltip();
+ this.removeTooltip();
}
}
diff --git a/src/tooltips.module.ts b/src/tooltips.module.ts
index b59a338..38ab936 100644
--- a/src/tooltips.module.ts
+++ b/src/tooltips.module.ts
@@ -1,5 +1,6 @@
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
+import { TooltipController } from './tooltip.cotroller';
import { TooltipBox } from './tooltip-box.component';
import { Tooltip } from './tooltip.directive';
@@ -10,4 +11,11 @@ import { Tooltip } from './tooltip.directive';
imports: [IonicModule],
exports: [Tooltip]
})
-export class TooltipsModule {}
+export class TooltipsModule {
+ static forRoot(): ModuleWithProviders {
+ return {
+ ngModule: TooltipsModule,
+ providers: [TooltipController]
+ }
+ }
+}