工具提示因溢出而被切断:隐藏的父级

时间:2017-07-28 15:58:59

标签: html css

我正在使用div创建一个工具提示overflow: hidden,因此当工具提示包含大量文本时,它会被切断,因为父级不大。工具提示为position: absolute

我已经看到很多答案(such as this one)表示不应该定位具有overflow: hidden的直接父母。然后,具有overflow: visible的较高父级应该是position: relative所在的位置。

问题是我在Angular 2中创建一个通用工具提示组件,每个组件都相对于表头单元格定位。因此,如果我创建父position: relative的父级,则所有工具提示将相对于表容器而不是表头单元格定位。任何人都知道如何以不同的方式修复工具提示截止状态?

1 个答案:

答案 0 :(得分:1)

您可以将工具提示移至<body>并通过调用getBoundingClientRect方法获取悬停/点击元素的位置,该方法返回项目相对于正文的位置。 通过这种方式,您的工具提示可以非常通用。

值得一提的是,该方法返回的对象也包含宽度和高度,可以方便地将工具提示相对于元素定位。