Tooltip

[farzinmonsef]

Tooltip-1 TS, HTML, CSS

+++++++++++++++++++++++++++++++++++++++++++++++ts import {Component} from '@angular/core'; import {FormControl} from '@angular/forms';

/**

• @title Tooltip with a changing message */ @Component({ selector: 'tooltip-message-example', templateUrl: 'tooltip-message-example.html', styleUrls: ['tooltip-message-example.css'], }) export class TooltipMessageExample { message = new FormControl('Info about the action'); }

+++++++++++++++++++++++++++++++++++++++++++++++html

Tooltip message

<button mat-raised-button [matTooltip]="message.value" aria-label="Button that displays a tooltip with a custom message"> Action

+++++++++++++++++++++++++++++++++++++++++++++++css .example-user-input { margin-right: 8px; }

[farzinmonsef]

Tooltip-2 TS, HTML, CSS

+++++++++++++++++++++++++++++++++++++++++TS import {Component} from '@angular/core'; import {FormControl} from '@angular/forms';

@Component({ selector: 'tooltip-message-example', templateUrl: 'tooltip-message-example.html', styleUrls: ['tooltip-message-example.css'], }) export class TooltipMessageExample { message = new FormControl('Info about the action'); }

+++++++++++++++++++++++++++++++++++++++++HTML

Tooltip message

<button mat-raised-button [matTooltip]="message.value" aria-label="Button that displays a tooltip with a custom message"> Action

+++++++++++++++++++++++++++++++++++++++++CSS .example-user-input { margin-right: 8px; }