@angular-ru/cdk/tooltip
Tooltip directive for your Angular app
Introduction
Demo: https://angular-ru.github.io/angular-ru-tooltip-example-app/
$ npm install @angular-ru/cdk/tooltip
Add styles to
styles.scss
file:
@import './node_modules/@angular-ru/cdk/tooltip/styles/index';
// ...
import { TooltipModule } from '@angular-ru/cdk/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-placement="bottom"
[tooltip]="tooltipTemplate"
[tooltip-context]="{ name: 'Max' }"
>
Bottom with HTML
</div>
<ng-template
#tooltipTemplate
let-context
>
<span style="text-decoration: underline; color: yellow">Hello {{ context.name }}</span>
</ng-template>
Last updated
Was this helpful?