Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jun 11, 2020

README.md


MIT commitizen PRs styled with prettier All Contributors ngneat spectator @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.

Buy Me A Coffee

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

You canโ€™t perform that action at this time.