angular 18版本 根据鼠标位置增加nz-tooltip浮窗提示

Angular 18版本中，要根据鼠标位置动态添加`nz-tooltip`浮窗提示，你需要结合Angular库ng-zorro-antd（NgZorro Ant Design）的`nz-tooltip`组件以及JavaScript事件处理。以下是一个简单的步骤说明：

1. 首先，在你的Angular项目中确保已经安装了`ng-zorro-antd`库。如果没有，可以使用命令行工具`npm install ng-zorro-antd@latest`来安装。

2. 在HTML模板中引入`nz-tooltip`组件并绑定到需要显示提示的元素上：

<button [nzTooltip]="tooltipMessage" (mouseover)="showTooltip($event)" (mouseout)="hideTooltip()" nz-tooltip-placement="top">
  点击查看提示
</button>

在这里，`nzTooltip`属性用于设置默认的提示内容，`(mouseover)`和`(mouseout)`事件监听器分别在鼠标悬停和移开时触发相应的函数。

3. 创建一个 TypeScript 或者 Angular 类文件，并定义`tooltipMessage`变量和两个方法`showTooltip`和`hideTooltip`：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  tooltipMessage = '';

  showTooltip(event: MouseEvent) {
    this.tooltipMessage = `提示信息: 鼠标位于 (${event.clientX}, ${event.clientY})`;
  }

  hideTooltip() {
    this.tooltipMessage = '';
  }
}

4. 在CSS中，你可以调整`nz-tooltip`的位置和样式，例如：

.nz-tooltip-show {
  display: block;
}

/* 根据需求定制提示框的样式 */

然后应用这个类名到显示提示时的`nz-tooltip`元素上。

5. 测试你的组件，当鼠标悬停在按钮上时，你应该能看到根据当前鼠标位置更新的浮窗提示。