嘿，刚好我之前做过类似的Angular悬停需求，来给你详细解答这两个问题：

这里有两种实用的方法，分别适合简单场景和需要更灵活配置的场景：

方法一：原生Angular事件+*ngIf实现基础弹窗 #

这种方法不需要额外依赖，上手快，适合简单的自定义内容展示。核心就是用鼠标事件控制弹窗的显示状态，再通过*ngIf渲染内容。

代码示例： #

组件模板（template）

<!-- 触发悬停的元素 -->
<div 
  (mouseenter)="showCustomContent = true" 
  (mouseleave)="showCustomContent = false"
  class="hover-trigger"
>
  把鼠标移过来看看！
</div>

<!-- 自定义的HTML弹窗内容 -->
<div *ngIf="showCustomContent" class="custom-hover-content">
  <h4>这是我的自定义标题</h4>
  <p>这里可以放任何你想要的HTML：</p>
  <ul>
    <li>比如列表项</li>
    <li>或者<img src="your-image.png" alt="小图标"></li>
  </ul>
</div>

组件类（component.ts）

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

@Component({
  selector: 'app-hover-demo',
  templateUrl: './hover-demo.component.html',
  styleUrls: ['./hover-demo.component.css']
})
export class HoverDemoComponent {
  // 控制弹窗显示的变量
  showCustomContent = false;
}

CSS样式（避免弹窗乱跑）

.hover-trigger {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.custom-hover-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 250px;
}

方法二：用Angular Material Tooltip（支持自定义HTML） #

如果你的项目已经引入了Angular Material，它的Tooltip组件可以轻松实现带自定义HTML的悬停弹窗。注意：Angular 2对应的Material版本是@angular/material@2.x，API和后续版本略有不同

代码示例： #

<!-- 定义自定义Tooltip的模板 -->
<ng-template #customTooltipTemplate>
  <div class="material-tooltip-content">
    <h5>自定义Material Tooltip</h5>
    <p>支持任意HTML内容，比如链接、图片等</p>
  </div>
</ng-template>

<!-- 触发元素 -->
<button 
  [matTooltipDisabled]="true"
  (mouseenter)="tooltipInstance.show()"
  (mouseleave)="tooltipInstance.hide()"
  #tooltipInstance="matTooltip"
>
  悬停我看自定义内容
</button>

这种弹窗本质是一个带复杂内容的浮层卡片，推荐两种实现方式：

方式一：自己封装组件+Angular CDK Overlay（官方推荐） #

Angular CDK的Overlay模块专门用来处理浮层场景，能帮你搞定定位、滚动跟随、点击外部关闭等细节，非常适合做这种用户卡片弹窗。

步骤1：创建用户卡片组件 #

先写一个独立的UserHoverCardComponent，用来展示封面、头像和用户信息：

模板文件

<div class="user-hover-card">
  <!-- 封面图 -->
  <div class="cover-photo" [style.backgroundImage]="'url(' + user.coverUrl + ')'"></div>
  <!-- 头像 -->
  <div class="avatar-wrapper">
    <img [src]="user.avatarUrl" [alt]="user.name" class="user-avatar">
  </div>
  <!-- 用户信息 -->
  <div class="user-details">
    <h3>{{user.name}}</h3>
    <p class="user-bio">{{user.bio}}</p>
    <span class="followers-count">{{user.followers}} 位关注者</span>
  </div>
</div>

CSS样式

.user-hover-card {
  width: 320px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  background: white;
}

.cover-photo {
  height: 90px;
  background-size: cover;
  background-position: center;
}

.avatar-wrapper {
  margin-top: -45px;
  padding: 0 20px;
}

.user-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
}

.user-details {
  padding: 16px 20px 20px;
}

.user-details h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.user-bio {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.followers-count {
  font-size: 13px;
  color: #888;
}

组件类

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

// 定义用户数据类型
interface User {
  name: string;
  avatarUrl: string;
  coverUrl: string;
  bio: string;
  followers: number;
}

@Component({
  selector: 'app-user-hover-card',
  templateUrl: './user-hover-card.component.html',
  styleUrls: ['./user-hover-card.component.css']
})
export class UserHoverCardComponent {
  // 接收父组件传递的用户数据
  @Input() user: User | null = null;
}

步骤2：在触发组件中使用CDK Overlay #

首先要把CDK的Overlay模块导入到你的NgModule中：

import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal'; // 需要配合Portal模块使用

@NgModule({
  imports: [
    // 其他模块
    OverlayModule,
    PortalModule
  ],
  declarations: [UserHoverCardComponent]
})
export class YourModule { }

然后在触发组件中控制浮层的显示和隐藏：

import { Component } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { UserHoverCardComponent } from './user-hover-card.component';

@Component({
  selector: 'app-user-trigger',
  templateUrl: './user-trigger.component.html'
})
export class UserTriggerComponent {
  private overlayRef: OverlayRef | null = null;
  // 模拟用户数据
  currentUser = {
    name: 'Roula Halabi',
    avatarUrl: 'your-avatar-url.jpg',
    coverUrl: 'your-cover-url.jpg',
    bio: '热爱Angular开发的工程师',
    followers: 1234
  };

  constructor(private overlay: Overlay) {}

  // 打开用户卡片
  openUserCard(event: MouseEvent) {
    // 配置浮层的定位策略
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(event.target as HTMLElement)
      .withPositions([{
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
        offsetY: 8 // 距离触发元素的间距
      }]);

    // 创建浮层实例
    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition(), // 滚动时跟随元素
      hasBackdrop: false // 不需要背景遮罩
    });

    // 挂载用户卡片组件到浮层
    const cardPortal = new ComponentPortal(UserHoverCardComponent);
    const componentRef = this.overlayRef.attach(cardPortal);
    // 传递用户数据
    componentRef.instance.user = this.currentUser;
  }

  // 关闭用户卡片
  closeUserCard() {
    if (this.overlayRef) {
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }
}

触发组件的模板

<span 
  (mouseenter)="openUserCard($event)" 
  (mouseleave)="closeUserCard()"
  class="user-name-link"
>
  {{currentUser.name}}
</span>

方式二：使用Angular UI组件库 #

如果不想自己写，也可以用Angular生态内的UI库，比如PrimeNG的Tooltip组件（支持自定义模板）或者NG-ZORRO的NzTooltip，不过要注意Angular 2版本比较老，需要找对应版本的库（比如PrimeNG 4.x）

内容的提问来源于stack exchange，提问作者Roula Halabi