Lit组件：点击更新工具提示文本，淡出动画后恢复默认值

Shoelace的Tooltip组件内置了sl-after-hide事件，该事件会在提示框的淡出动画完全结束后触发，正好可以用来实现你的需求——不用监听mouseout，而是通过这个事件来恢复文本默认值，确保动画完成后才变更内容。

以下是完整的Lit组件示例：

import { LitElement, html, property } from 'lit';
import { customElement } from 'lit/decorators.js';
// 确保已导入Shoelace Tooltip组件

@customElement('copy-action-button')
export class CopyActionButton extends LitElement {
  @property()
  copyText = 'Click to copy';

  // 处理复制逻辑并更新提示文本
  handleCopy() {
    // 这里添加你的复制实现（比如使用navigator.clipboard）
    this.copyText = 'Copied!';
  }

  // Tooltip淡出动画完成后恢复默认文本
  handleTooltipHidden() {
    this.copyText = 'Click to copy';
  }

  render() {
    return html`
      <sl-tooltip @sl-after-hide=${this.handleTooltipHidden}>
        <button @click=${this.handleCopy} slot="trigger">
          ${this.copyText}
        </button>
        <span>点击复制到剪贴板</span>
      </sl-tooltip>
    `;
  }
}

关键说明： #

• 点击按钮时，handleCopy会立即更新copyText为提示复制成功的文本；
• 当Tooltip隐藏（无论鼠标移出还是其他触发隐藏的操作），动画结束后sl-after-hide事件触发，调用handleTooltipHidden恢复默认文本；
• 这种方式完全贴合Shoelace组件的生命周期，不需要手动设置定时器来等待动画时长，避免了硬编码动画时间带来的适配问题。

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