工具提示隐藏在溢出滚动/自动容器上

Posted 2023-03-13

【中文标题】工具提示隐藏在溢出滚动/自动容器上

【英文标题】：Tooltip hides on Overflow scroll/auto container

【发布时间】：2019-12-26 13:34:22

【问题描述】：

我正在使用 Angular - 带有卡片和工具提示的清晰度..

请看网址——https://stackblitz.com/edit/clarity-wio9hp

这里工具提示隐藏在卡片内...我只需要显示工具提示或不要切断卡片，里面的内容需要是 oveflow scroll/auto..

事实上我已经搜索了很多答案但对我不起作用..

【参考方案1】：

.tooltip-content 有position: relative，所以会一直显示在卡片里面。

另一种解决方案是根据鼠标位置显示工具提示。

使 tooltip-content position: fixed 显示在框外。

.tooltip-content 
  position: fixed!important;

需要一些自定义代码才能将工具提示定位在正确的位置。但是您可以根据鼠标位置执行此操作。看到这个帖子：Angular 4 Observables mouse coordinates

将元素样式顶部和左侧绑定到工具提示元素，工具提示将跟随您的鼠标：<span class="tooltip-content" [style.top]="mouseY + 'px'" [style.left]="mouseX + 'px'"> 当然，其余元素需要更多样式才能整齐地显示。

请参阅：https://stackblitz.com/edit/clarity-aogelj 在此示例中，第一个标签将显示我的意思。

您还可以获得当前悬停在上面的<a> 元素的坐标。并使用position: fixed 和top: elementY px left: elementX px 显示工具提示。这里描述了获取 DOM 元素的方法：How to get dom element in angular 2