@ngneat/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	top
helipopperTrigger	string	The tooltip trigger
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
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();
  }
}

open() returns an HelipopperDirective which allows you to use manual trigger on it.

It takes the following paramaters:

• The host Element
• The popper content
• An optional options object with all the @Input options available.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻 📖 🤔

Itay Oded 💻

Gérôme Grignon 💻

Artur Androsovych 💻 ⚠️

Shahar Kazaz 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome! Icon made by Airport from www.flaticon.com

Changelog

1.5.4 (2020-11-22)

Bug Fixes

• 🐛 several intersection events on the same tick (6eab305)