相对于鼠标位置的角度工具提示指令答案

【问题标题】：Angular tooltip directive relative to mouse position相对于鼠标位置的角度工具提示指令
【发布时间】：2019-08-19 18:30:11
【问题描述】：

到目前为止，我已经找到了许多示例，展示了如何创建 工具提示，其位置是相对于我们添加指令的组件。

但是，我找不到在将鼠标悬停在组件上时显示相对于鼠标位置的工具提示的指令示例。

我怎样才能得到这个效果？

示例：

<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 -->

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

我会在 3 个组件的 DOM 中定义工具提示，然后完全按照您现在所做的操作，减去 [tooltip] 数据绑定（除非您需要每个组件中的数据）。然后，您可以在每个工具提示中输入您想要的任何文本，而不必担心鼠标输入和鼠标移动操作。

例如

主要组件

<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>

【讨论】：

【解决方案2】：

可扩展的解决方案：

tooltipable.component.html - 这个组件是包装器，它期望子组件被分成两个部分：

工具提示 - 部分有条件地显示 (onMouseEnter)
body - 正常部分（始终显示）

<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>

【讨论】：