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中的每一个中定义工具提示，然后精确地执行您现在要做的事情，减去[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>

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>

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

2 个答案: