JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q25608F

Custom tooltip for Angular Applications. Built without using Angular Material.

Package Exports

  • ncp-tooltip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ncp-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NcpTooltip

npm version

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>
  1. 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"]