要设置交互功能，请添加事件监听器来调用 show 和 hide 方法。首先，在类定义之上定义相关事件的数组：

// 开启/关闭 tooltip 的事件
const enterEvents = ['pointerenter', 'focus'];
const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];

现在添加一个 target 属性，表示 tooltip 所提示的元素。在类内部创建一个属性访问器，用于管理事件处理器的添加和移除：

_target: Element|null = null;

get target() {
  return this._target;
}

set target(target: Element|null) {
  // 从现有 target 移除事件
  if (this.target) {
    enterEvents.forEach(name =>
      this.target!.removeEventListener(name, this.show));
    leaveEvents.forEach(name =>
      this.target!.removeEventListener(name, this.hide));
  }
  // 为新 target 添加事件
  if (target) {
    enterEvents.forEach(name =>
      target!.addEventListener(name, this.show));
    leaveEvents.forEach(name =>
      target!.addEventListener(name, this.hide));
  }
  this._target = target;
}

_target = null;

get target() {
  return this._target;
}

set target(target) {
  // 从现有 target 移除事件
  if (this.target) {
    enterEvents.forEach((name) =>
      this.target.removeEventListener(name, this.show)
    );
    leaveEvents.forEach((name) =>
      this.target.removeEventListener(name, this.hide)
    );
  }
  // 为新 target 添加事件
  if (target) {
    enterEvents.forEach((name) => target.addEventListener(name, this.show));
    leaveEvents.forEach((name) => target.addEventListener(name, this.hide));
  }
  this._target = target;
}

用户可以以命令式方式设置 tooltip 的 target，但为了使元素在 HTML 中更易于声明式使用，如果尚未设置 target，则在 tooltip 连接时默认将其设为前一个 DOM 元素。有更复杂的声明式管理 target 的方式，但目前这样就足够了。在 connectedCallback 的末尾添加：

connectedCallback() {
  //...
  this.target ??= this.previousElementSibling;
}

空值赋值运算符用于仅在 target 未设置时才赋值。

tooltip 现在会根据用户交互来显示，但位置不正确，你可以通过将指针移到最右侧的方框上来观察到这一点。