orestisioakeimidis/helipopper

A Powerful Tooltip and Popover for Angular Applications

Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.js.

It is an abstraction over Popper that provides the logic and optionally the styling involved in all types of elements that pop out from the flow of the document and get overlaid on top of the UI, positioned next to a reference element.

This is a lightweight wrapper with additional features that lets you use it declaratively in Angular. Tippy has virtually no restrictions over Popper and gives you limitless control while providing useful behavior and defaults.

Features

✅ Tooltip & Popover Variations
✅ TemplateRef/Component Support
✅ Lazy Registration
✅ Manual Trigger Support
✅ Text Overflow Support
✅ Sticky Support

Installation

ng add @ngneat/helipopper

Add the HelipopperModule to your AppModule:

import { HelipopperModule } from '@ngneat/helipopper';

@NgModule({
  declarations: [AppComponent],
  imports: [HelipopperModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now you can use it:

<button helipopper="Helpful Message">
  I have a tooltip
</button>

TemplateRef:

<button [helipopper]="tpl" helipopperVariation="popper">
  Click Me
</button>

<ng-template #tpl>
  <div *ngFor="let msg of messages">{{ msg }}</div>
  <button (click)="talk()">Click to talk ☮️️</button>
</ng-template>

Component:

<button [helipopper]="component" (helipopperClose)="onClose()">
  Click Me
</button>

Handle current status as boolean

<button helipopper="Helpful Message" (helipopperVisible)="handleStatus($event)">
  Click Me
</button>

and on .ts

handleStatus($event: boolean): void {
  console.log('show tooltip', $event);
}

Text Overflow:

<ul style="max-width: 100px;">
  <li class="ellipsis" [helipopper]="text" helipopperPlacement="right" [helipopperTextOverflow]="true">
    {{ text }}
  </li>
</ul>

Manual Trigger:

<span helipopper="Helpful Message" helipopperTrigger="manual" #tooltip="helipopper">Click Open to see me</span>

<button (click)="tooltip.show()">Open</button>
<button (click)="tooltip.hide()">Close</button>

You can see more examples in our playground, or live here.

Styling

Add the following style to your main scss file:

@import '~tippy.js/dist/tippy.css';
@import '~tippy.js/themes/light.css';
@import '~tippy.js/animations/scale.css';

.tippy-content {
  position: relative;
}

.tippy-close {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 9px;
  right: 9px;
  fill: rgb(158, 160, 165);
  cursor: pointer;
  z-index: 1;
}

.tippy-box {
  border-radius: 4px;
  font-size: 11px;

  .tippy-content {
    padding: 4px 6px;
  }
}

.tippy-box[data-theme~='light'] {
  font-size: 12px;
  word-break: break-word;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
  color: rgb(79, 80, 83);

  .tippy-content {
    padding: 13px 48px 13px 20px;
  }
}

.tippy-arrow::before {
  box-shadow: -4px 4px 14px -4px rgba(0, 0, 0, 0.2);
}

You have the freedom to customize it if you need to.

Inputs

@Input	Type	Description	Default
helipopperVariation	`tooltip` \| `popper`	The tooltip type	`tooltip`
helipopper	`string` \| `TemplateRef`	The tooltip content	`none`
helipopperPlacement	`Popper placement`	The tooltip placement	`bottom`
helipopperClass	`string` \| `string[]`	Custom class that'll be added to the tooltip	`none`
helipopperOffset	`[number, number]`	Set tooltip offset position	`[0, 10]`
helipopperDisabled	`Boolean`	Whether to disabled the tooltip	`false`
helipopperHost	`ElementRef` \| `Element`	The target element	`Host`
helipopperAppendTo	`string`\| `Element`	The element to append the tooltip to	`appendTo`
helipopperOptions	`tippy` options	`tippy` options	docs
helipopperTextOverflow	`Boolean`	Show the tooltip only when the text overflows its container	`false`
helipopperSticky	`Boolean`	Whether the tooltip should be sticky (i.e. always displayed)	`false`
helipopperTarget	`ElementRef` \| `Element`	The element(s) that the trigger event listeners are added to	`Host`
helipopperInjector	`Injector` \| `undefined`	The custom injector to be provided	`none`

Outputs

@Output	Type	Description
helipopperClose	`void`	Method called when tooltip is closed
helipopperVisible	`boolean`	Method that emits the tooltip's current status as boolean

Config

beforeRender - Hook that'll be called before rendering the tooltip content: ( applies only for string )

import { HelipopperModule } from '@ngneat/helipopper';

@NgModule({
  imports: [
    HelipopperModule.forRoot({
      beforeRender(content) {
        return sanitize(content);
      }
    })
  ]
})
export class AppModule {}

closeIcon - The svg close icon that'll be used inside the popper.

Attach the Popper Manually

class Component {
  @ViewChild('inputName', { static: true }) inputName: ElementRef;

  constructor(private service: HelipopperService) {}

  open() {
    if (!this.popper) {
      this.popper = this.service.open(this.inputName, 'this field is required', options);
    }
  }

  close() {
    this.popper.hide();
  }
}