如何在HTML/Angular中实现带悬浮提示的多代码缩略展示？

一、HTML原生实现 #

原生title属性方案（简单快捷） #

直接利用HTML自带的title属性实现悬浮提示，无需额外样式：

<div id="codeEl"></div>

<script>
  // 模拟API返回的逗号分隔字符串
  const apiCodeStr = "code1,code2,code3,code4";
  const codeList = apiCodeStr.split(',');
  // 生成显示文本：第一个元素+，如果只有一个则直接显示
  const showText = codeList.length > 1 ? `${codeList[0]}+` : codeList[0];
  // 拼接成中文分隔的完整列表
  const fullCodeText = codeList.join('、');

  const codeEl = document.getElementById('codeEl');
  codeEl.textContent = showText;
  codeEl.title = fullCodeText;
</script>

自定义样式Tooltip方案（更美观） #

如果需要自定义悬浮提示的样式，可使用CSS伪元素实现：

<div class="custom-tooltip" id="customCodeEl"></div>

<style>
.custom-tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
}

.custom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.custom-tooltip:hover::after {
  opacity: 1;
}
</style>

<script>
  const apiCodeStr = "code1,code2,code3,code4";
  const codeList = apiCodeStr.split(',');
  const showText = codeList.length > 1 ? `${codeList[0]}+` : codeList[0];
  const fullCodeText = codeList.join('、');

  const codeEl = document.getElementById('customCodeEl');
  codeEl.textContent = showText;
  codeEl.setAttribute('data-tooltip', fullCodeText);
</script>

二、Angular实现 #

基础方案（title属性） #

组件逻辑（.ts）

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-code-display',
  templateUrl: './code-display.component.html',
  styleUrls: ['./code-display.component.css']
})
export class CodeDisplayComponent implements OnInit {
  codeStr: string = '';
  displayText: string = '';
  fullCodeText: string = '';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 替换为你的API请求地址
    this.http.get<string>('/api/get-codes').subscribe(res => {
      this.codeStr = res;
      const codeList = this.codeStr.split(',');
      this.displayText = codeList.length > 1 ? `${codeList[0]}+` : codeList[0];
      this.fullCodeText = codeList.join('、');
    });
  }
}

模板（.html）

<span [title]="fullCodeText">{{ displayText }}</span>

自定义Tooltip样式方案 #

组件样式（.css）

.code-tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
}

.code-tooltip .tooltip-box {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2d3748;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.code-tooltip:hover .tooltip-box {
  opacity: 1;
}

模板（.html）

<div class="code-tooltip">
  {{ displayText }}
  <span class="tooltip-box">{{ fullCodeText }}</span>
</div>

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