<button title="Click me!">Hover over me</button>

Метод 2: использование директив Angular
Angular предоставляет директивы, которые позволяют динамически устанавливать атрибут заголовка на основе определенных условий или данных. В следующем примере показано, как использовать [attr.title]

<button [attr.title]="isHovered ? 'Button clicked' : 'Click me!'"
        (mouseover)="isHovered = true"
        (mouseout)="isHovered = false">
  Hover over me
</button>

.

Метод 3: использование пользовательской директивы
Вы можете создать пользовательскую директиву в Angular, чтобы инкапсулировать логику для заголовков при наведении. Вот пример того, как можно создать HoverTitleDirective:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[appHoverTitle]'
})
export class HoverTitleDirective {
  @Input('appHoverTitle') title: string;
  constructor(private elementRef: ElementRef) { }
  @HostListener('mouseenter')
  onMouseEnter() {
    this.elementRef.nativeElement.title = this.title;
  }
  @HostListener('mouseleave')
  onMouseLeave() {
    this.elementRef.nativeElement.title = '';
  }
}

<button appHoverTitle="Click me!">Hover over me</button>

.