如何在Svelte中全局使用Action实现无需逐一声明的Tooltip功能

核心实现思路 #

采用全局事件委托 + 单例Tooltip组件的方案，完全符合你不需要逐个元素加指令、支持HTML内容渲染的需求，性能和开发者体验都最优：

• 首先在项目根布局（如SvelteKit的+layout.svelte）全局挂载唯一一个Tooltip组件，整个应用生命周期内只初始化一次
• 给全局document绑定事件委托，不需要逐个遍历DOM绑定事件，运行时动态匹配所有带tooltip属性的元素：

<!-- 根布局内的单例Tooltip组件 -->
<script>
  let visible = false
  let content = ''
  let x = 0
  let y = 0

  document.addEventListener('mousemove', (e) => {
    const targetEl = e.target.closest('[tooltip]')
    if (targetEl) {
      visible = true
      content = targetEl.getAttribute('tooltip')
      // 自定义偏移量避免鼠标挡住提示框
      x = e.clientX + 10
      y = e.clientY + 10
    } else {
      visible = false
    }
  })
</script>

{#if visible}
<div class="tooltip" style="left: {x}px; top: {y}px; position: fixed;">
  {@html content}
</div>
{/if}

<style>
.tooltip {
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
}
</style>

• 业务代码使用时不需要引入任何组件、不需要加use:指令，直接给元素加tooltip属性即可：

<button tooltip="这是普通提示">普通按钮</button>
<div tooltip="这是<b>富文本</b>提示<br>支持换行、自定义样式">富文本元素</div>

方案优势 #

• 开发成本极低，业务侧无额外使用成本，DX远高于逐个加指令/引入组件的方案
• 全局仅1个Tooltip实例，即使页面有上万个带提示的元素，性能也不会有明显下降
• 完全支持HTML内容渲染，通过{@html}语法可以实现任意复杂的提示框内容

可选优化点 #

• 如果需要支持提示框内的交互（如点击按钮），可以给mouseleave逻辑加300ms延迟隐藏，同时给Tooltip元素加pointer-events: auto即可
• 可以扩展支持tooltip-position等自定义属性，控制提示框的弹出方向、样式等

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