角刀尖指令与鼠标位置相关
角刀尖指令与鼠标位置相关
提问于 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 -->回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-14 17:55:11
可伸缩解决方案：
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>Stack Overflow用户
发布于 2019-08-19 19:36:30
我将在每个组件的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57562156
复制相关文章
相似问题
腾讯云开发者
