JSPM

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

Outputs

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 💻 ⚠️

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