如何在angular组件中使用bootstrap语法将对象显示为工具提示

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="这是一个工具提示">显示工具提示</button>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('tooltipElement') tooltipElement: ElementRef;

  ngAfterViewInit() {
    const tooltip = new bootstrap.Tooltip(this.tooltipElement.nativeElement);
  }
}

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild('tooltipElement') tooltipElement: ElementRef;
  tooltip: bootstrap.Tooltip;

  ngAfterViewInit() {
    this.tooltip = new bootstrap.Tooltip(this.tooltipElement.nativeElement);
  }

  ngOnDestroy() {
    this.tooltip.dispose();
  }
}