NcpTooltip

Custom tooltip for angular projects. It is built without using Angular Material.

Installing

  npm i ncp-tooltip

Peer dependencies - must to be added as dependencies

1. Angular animations
2. Thanks to @tinkoff/ng-polymorpheus you can use template refs as content for your tooltip as well as plain strings.

Main modules:

1. NcpRootModule - used as a wrapper to display the tooltip above all of your content. With this wrapper it is guaranteed that your content doesn't overlap with tooltip
2. NcpHintModule - hint directive
3. NcpKeyboardFocusModule - used to activate the tooltip with keyboard focus

Usage

1. You have to import NcpRootModule into your main module. Then wrap your content with the ncp-root component

  app.module.ts
  
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // NoopAnimationsModule can be used as well
    NcpRootModule,
  ]

  app.component.html
  
  <ncp-root>
    // your app content 
  </ncp-root>

If you want to display something above the tooltip you can do it using content projection

  <ncp-root>
    // your content
    
    <ng-container ngProjectAs="ncpOverHints">
      // content above tooltip
    </ng-container>
  <ncp-root>

As an observation, if you have some custom modals and want to use a tooltip inside the modal, you have to wrap your modal component with NcpRootModule wrapper

  custom-modal.html
  
  <ncp-root>
    <div class="header">
      // your modal header
    </div>
    
    <div class=content>
      // your modal content
    </div>   
  </ncp-root>

2. Import NcpHintModule for hints and NcpKeyboardFocusModule if you want to activate the tooltip with the keyboard.

Next you use the directives to create your desired tooltips.

  <button
    ncpHintId="tooltip"         // tooltip id - used to identify your tooltip if you want to use keyboard focus
    ncpKeyboardFocus="tooltip"  // trigger tooltip with keyboard
    ncpHintPlacement="right"    // tooltip placement
    [ncpHint]="tooltipContent"  // tooltip content
  >
    Press me
  </button>

  <ng-template #tooltipContent>
    Button tooltip
  </ng-template>

Situational input

  ncpHintMode = ["error", "onDark"]