jefn76 / helipopper Goto Github PK

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.

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

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>

<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>

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

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

<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.

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.

• 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.

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻 📖 🤔

Itay Oded 💻

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