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] + } + } +}