NglTooltip for Angular App

It's a highly customizable and simple tooltip. You can use component, template or DOM element to display tooltip content.

Installation

Install the ngl-tooltip npm package.

npm install ngl-tooltip

Import NglTooltipModule.

import { NglTooltipModule } from 'ngl-tooltip';
 
@NgModule({
    imports: [NglTooltipModule]
}) 

Import tooltip.css

@import '~ngl-tooltip/styles/tooltip.css';

Basic Usage

You can pass text content right to directive, so it can be shown when you hover applied directive element.

<button nglTooltip="Tooltip" type="button">Hover me!</button>

With the component

You're able to show component on a tooltip with it's data. Firstly, create component and inject the tooltip data via NGL_TOOLTIP_DATA.

import { NGL_TOOLTIP_DATA } from 'ngl-tooltip';

@Component({
  template: '<p class="tooltip-text">{{ tooltipData }}</p>',
  styles: ['.tooltip-text { color: green }'],
})
export class CustomTooltipComponent {
  constructor(@Inject(NGL_TOOLTIP_DATA) public tooltipData: string) {}
}

Secondly, pass your component to nglTooltipContent and tooltip data.

<button type="button" nglTooltip="Tooltip" [nglTooltipContent]="tooltipComponent">Hover me!</button>

With the template

Pass the template to render it on the tooltip.

<button type="button" 
    [nglTooltip]="{ text: 'Tooltip template!' }" 
    [nglTooltipContent]="tooltipTemplate"
>
    Hover me!
</button>

<ng-template #tooltipTemplate let-text="text">
  <span>{{ text }}</span>
</ng-template>

With the DOM element

Create DOM element

div = document.createElement('div');

Pass element to the tooltip directive

<button type="button" [nglTooltip] [nglTooltipContent]="div">Hover me!</button>

Customization

You can override default tooltip css variables

:root {
  --ngl-tooltip-text-color: #fff;
  --ngl-tooltip-background-color: #383838;
  --ngl-tooltip-padding: 7px 8px 9px 8px;
  --ngl-tooltip-border-radius: 3px;
  --ngl-tooltip-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Apple Color Emoji, Helvetica, Arial,
    sans-serif, Segoe UI Emoji, Segoe UI Symbol;
  --ngl-tooltip-font-size: 12px;
}