projects/cobbler-frontend/src/app/common/help-button/help-button.component.ts
| selector | cobbler-help-button |
| standalone | true |
| imports |
MatIconButton
MatIcon
MatTooltip
|
| templateUrl | ./help-button.component.html |
Properties |
|
Methods |
Inputs |
| hint | |
Type : string
|
|
| onClick | ||||||
onClick(tooltip: MatTooltip)
|
||||||
|
Parameters :
Returns :
void
|
| onMouseEnter | ||||||
onMouseEnter(tooltip: MatTooltip)
|
||||||
|
Parameters :
Returns :
void
|
| onMouseLeave | ||||||
onMouseLeave(tooltip: MatTooltip)
|
||||||
|
Parameters :
Returns :
void
|
| Private sticky |
Type : unknown
|
Default value : false
|
import { Component, Input } from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
@Component({
selector: 'cobbler-help-button',
standalone: true,
imports: [MatIconButton, MatIcon, MatTooltip],
templateUrl: './help-button.component.html',
})
export class HelpButtonComponent {
@Input() hint?: string;
private sticky = false;
onMouseEnter(tooltip: MatTooltip): void {
tooltip.show();
}
onMouseLeave(tooltip: MatTooltip): void {
if (!this.sticky) {
tooltip.hide();
}
}
onClick(tooltip: MatTooltip): void {
this.sticky = !this.sticky;
if (this.sticky) {
tooltip.show();
} else {
tooltip.hide();
}
}
}
@if (hint) {
<button
mat-icon-button
#tooltip="matTooltip"
[matTooltip]="hint"
matTooltipPosition="right"
(mouseenter)="onMouseEnter(tooltip)"
(mouseleave)="onMouseLeave(tooltip)"
(click)="onClick(tooltip); $event.stopPropagation()"
>
<mat-icon>help_outline</mat-icon>
</button>
}