Tooltip directive for your Angular app

Introduction

Demo: https://angular-ru.github.io/angular-ru-tooltip-example-app/

$ npm install @angular-ru/tooltip

• Add styles to styles.scss file:

@import '~@angular-ru/tooltip/styles';

// ...

import { TooltipModule } from '@angular-ru/tooltip';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        // ...
        TooltipModule.forRoot()
    ]
})
export class AppModule {}

Basic example

<div tooltip="Bottom" tooltip-placement="bottom">Bottom</div>
<div tooltip="Right" tooltip-placement="right">Right</div>
<div tooltip="Left" tooltip-placement="left">Left</div>
<div tooltip="Top" tooltip-placement="top">Top</div>

The value of option '[tooltip-placement]' by default is 'top'.

A custom template for the tooltip (html)

<div [tooltip]="tooltipTemplate" [tooltip-context]="{ name: 'Max' }" tooltip-placement="bottom">Bottom with HTML</div>

<ng-template #tooltipTemplate let-context>
    <span style="text-decoration: underline; color: yellow">Hello {{ context.name }}</span>
</ng-template>