ncp-tooltip v0.0.7
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"]