如何在无框架场景下实现MDC（Material Design Component）的tooltip功能？

排查方案 #

• 检查CSS引入合法性
  你当前使用的@use "@material/tooltip/styles";是Sass专属语法，若直接写在普通.css文件中浏览器无法识别，会导致tooltip缺少显示、定位的核心样式。你需要提前通过Sass编译器编译该代码，或直接引入已编译完成的MDC全量CSS文件。
• 给目标元素添加可聚焦属性
  非原生可交互元素（如div、普通卡片）默认无法触发tooltip的事件监听，需要给绑定了aria-describedby的目标元素添加tabindex="0"属性，使其可被聚焦，才能正常触发hover、focus时的tooltip显示逻辑，修改后的代码示例：

  <div aria-describedby="tooltip-1" class="mdc-card in-card-margins" tabindex="0">
    <div>The status of these data updates can be observed in the blabla</div>
  </div>
  

• 修正tooltip实例绑定逻辑
  部分版本的MDCTooltip需要显式关联锚点元素，可调整实例化代码如下：

  import {MDCTooltip} from '@material/tooltip';
  const tooltipEl = document.querySelector('.mdc-tooltip');
  const anchorEl = document.querySelector('[aria-describedby="tooltip-1"]');
  const tooltip = new MDCTooltip(tooltipEl);
  tooltip.setAnchorElement(anchorEl);
  

• 调整tooltip元素的DOM层级
  把tooltip元素放在body的直接子节点位置，不要嵌套在带有overflow: hidden或position: relative的父容器内，避免定位计算出错导致tooltip被裁切或出现在视口外。

若以上排查后仍无效果，可打开浏览器开发者工具查看是否有JS报错，或hover时检查tooltip元素的属性、样式变化，确认是事件逻辑未触发还是样式未生效。

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