tooltip 通过延迟创建支持了良好的性能，但使用 lazy API 比较繁琐。此外，当被问候的人名改变时，tooltip 内容不会更新。

一个 Lit 指令可以通过封装 tooltip 的 lazy API 来解决这些问题。指令的使用者将在目标元素上使用一个元素表达式，并提供一个包含 tooltip 内容的 TemplateResult。

指令的脚手架已经为你搭建好了，其中 update 方法已完成。它存储了指令 part 和传入的 tooltipContent，以便你可以在接下来添加的方法中使用它们：setupLazy 和 renderTooltipContent。

实现 setupLazy 方法。它应该设置 didSetupLazy 以确保只被调用一次，然后调用 SimpleTooltip.lazy。对 lazy 的调用将在指令上存储 tooltip，然后调用你接下来将实现的 renderTooltipContent 方法。

setupLazy() {
  this.didSetupLazy = true;
  SimpleTooltip.lazy(this.part!.element, (tooltip: SimpleTooltip) => {
    this.tooltip = tooltip;
    this.renderTooltipContent();
  });
}

setupLazy() {
  this.didSetupLazy = true;
  SimpleTooltip.lazy(this.part.element, (tooltip) => {
    this.tooltip = tooltip;
    this.renderTooltipContent();
  });
}

接下来实现 renderTooltipContent 方法。它将调用 Lit 的 render 函数将 tooltipContent 渲染到 tooltip 元素中。你将使用 part 的 renderOptions 以保持同步。同时，确保从 Lit 导入 render。

import {html, css, LitElement, render} from 'lit';
//...

renderTooltipContent() {
  render(this.tooltipContent, this.tooltip!, this.part!.options);
}

import {html, css, LitElement, render} from 'lit';
//...

renderTooltipContent() {
  render(this.tooltipContent, this.tooltip, this.part.options);
}

现在打开 my-content. 模块。之前你添加的调用 lazy 的繁琐代码已经被移除了。导入 tooltip 指令，找到问候语，并在那里添加指令。

import {tooltip} from './simple-tooltip.js';

<p>
  <span ${tooltip(html`${this.name}, there's coffee available in the lounge.`)}>
    Hello, ${this.name}!
  </span>
</p>

最后，与问候语交互以验证 tooltip 是否正常工作。