页面缩放场景下如何让图标tooltip(title属性)文本同步缩放？

浏览器解析元素title属性生成的悬浮tooltip是浏览器/操作系统层面的内置原生控件，不属于页面DOM树的渲染范畴，网页的CSS规则、缩放适配逻辑完全无法作用到这类原生控件上，它的字号、尺寸、展示位置全部由浏览器自身逻辑控制，页面缩放时不同步调整尺寸是原生实现的固有特性，不存在修改title属性配置就能解决该问题的方案。

放弃原生title属性的tooltip能力，改用DOM层面实现的自定义tooltip，这类tooltip属于页面正常渲染的DOM节点，会天然跟随页面缩放比例同步调整尺寸，适配逻辑不需要额外开发。

落地步骤 #

• 移除原有Icon组件上的title属性，保留aria-label等无障碍属性不做改动
• 选择自定义实现或者项目已有组件库的Tooltip组件包裹图标，实现悬浮/键盘聚焦时的提示展示
• 如果你项目没有现成的Tooltip组件，可以参考以下最小实现（适配React+TS技术栈）：

import { useState } from 'react';

const InfoTip = ({ description }: { description: string }) => {
  const [visible, setVisible] = useState(false);
  const toggleVisible = (status: boolean) => setVisible(status);

  return (
    <span style={{ position: 'relative', display: 'inline-block' }}>
      <Icon
        iconName="Info"
        tabIndex={0}
        aria-label={description}
        css="padding: 0 .2rem; margin-right: .1rem;"
        onMouseEnter={() => toggleVisible(true)}
        onMouseLeave={() => toggleVisible(false)}
        onFocus={() => toggleVisible(true)}
        onBlur={() => toggleVisible(false)}
      />
      {visible && (
        <span
          role="tooltip"
          css={`
            position: absolute;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.35rem 0.6rem;
            background: rgba(0,0,0,0.85);
            color: #fff;
            border-radius: 4px;
            font-size: 0.85rem;
            line-height: 1.4;
            white-space: normal;
            max-width: 240px;
            z-index: 1000;
          `}
        >
          {description}
        </span>
      )}
    </span>
  );
};

如果项目已经引入了Ant Design、MUI、Chakra UI等成熟组件库，直接使用组件库自带的Tooltip组件即可，不需要手动编写显隐逻辑和样式，这类组件的Tooltip全部基于DOM实现，天然支持页面缩放适配。

无障碍注意点 #

自定义tooltip需要补充role="tooltip"属性，同时给触发图标添加aria-describedby关联tooltip的id，保证屏幕阅读器可以正常读取提示内容，不要丢失原有原生title的无障碍能力。

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