相對於鼠標位置的角度工具提示指令

Question

到目前為止，我已經找到了許多示例，展示了如何創建一個工具提示，其位置相對於我們添加指令的組件。

但是，我找不到指令的示例，當懸停在組件上時，會顯示相對於鼠標位置的工具提示。

我怎樣才能得到這個效果？

---

例子：

<tooltip></tooltip> <!-- default: display: none and position: absolute -->

<component-A [tooltip]="data"></component-A>
<component-B [tooltip]="data"></component-B>
<component-C [tooltip]="data"></component-C>
<!-- show tooltip on mousenter and update position on mousemove -->

Answer 1

我會在 3 個組件的 DOM 中的每一個中定義工具提示，然后完全按照您現在所做的去做，減去 [工具提示] 數據綁定（除非您需要每個組件中的數據）。 然后，您可以在每個工具提示中輸入您想要的任何文本，而不必擔心鼠標輸入和鼠標移動操作。

例如

主要組件

<component-A></component-A>
<component-B></component-B>

組件 A：

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip A text</span>
</div>

組分 B：

<div class="tooltip">Hover over me
      <span class="tooltiptext">Tooltip B text</span>
</div>

Answer 2

可擴展的解決方案：

---

tooltipable.component.html - 這個組件是包裝器，期望子組件被分成兩部分：

• 工具提示- 部分有條件地顯示 (onMouseEnter)
• 正文- 正常部分（始終顯示）

<app-tooltip [display]="this.display" [x]="this.x" [y]="this.y">
  <ng-content select="[tooltip]"></ng-content>
</app-tooltip>

<ng-content select="[body]"></ng-content>

---

tooltip.component.html - 這是要在工具提示中顯示的數據的容器

<div class="tooltip"
  [style.display]="this.display ? 'block' : 'none'"
  [style.top]="y + 'px'"
  [style.left]="x + 'px'"
>
    <ng-content></ng-content>
</div>

---

some.component.html

<app-tooltipable>
   <div tooltip>Hello tooltip!</div>
   <div body>Hello world!</div>
</app-tooltipable>