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

Question

我正在使用 Angular - Clarity with cards and tooltip..

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

这里工具提示隐藏在卡片内...我只需要显示工具提示或不在卡片上截断，内部内容需要溢出滚动/自动..

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

Answer 1

.tooltip-content 有 position: relative , 因此它将始终显示在卡片中。

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

制作工具提示内容 position: fixed将其显示在框外。

.tooltip-content {
  position: fixed!important;
}

需要一些自定义代码才能将工具提示定位在正确的位置。但是你可以根据鼠标位置来做到这一点。看到这个帖子:Angular 4 Observables mouse coordinates

将元素样式 top 和 left 绑定(bind)到 tooltip 元素，tooltip 将跟随您的鼠标:<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