Javascript 鼠标悬停在工具提示区域的工具提示指令

我的要求是，当用户鼠标悬停在图标上时，应该显示工具提示，用户可以在工具提示中单击URL。另外，icon div中的工具提示元素应该在鼠标悬停时附加到body，并在鼠标悬停时删除。因为工具提示大小很大，并且父元素具有自动溢出。因此需要显示主体的附加工具提示元素

在下面的代码中，我可以将工具提示数据附加到主体中，但它正在删除图标内的元素。所以第二次它没有得到工具提示数据，并且给出了错误

<div class="overflowAuto">
    <div class="icon" appClickableTooltip>
        <div>Tooltip HTML Elements and data here...</div>
    </div>
</div>

---

您不需要@hostlistener

试试这个：

<div (mouseenter) ="mouseEnter('div a') "  (mouseleave) ="mouseLeave('div A')">
  <h2>Div A</h2>
</div> 
<div (mouseenter) ="mouseEnter('div b')"  (mouseleave) ="mouseLeave('div B')">
  <h2>Div B</h2>
</div>

A组
B组

你也看到了吗

<div (mouseenter) ="mouseEnter('div a') "  (mouseleave) ="mouseLeave('div A')">
  <h2>Div A</h2>
</div> 
<div (mouseenter) ="mouseEnter('div b')"  (mouseleave) ="mouseLeave('div B')">
  <h2>Div B</h2>
</div>