如何在angular材质对话框内容中使overflow-x可见

Question

我在角度材质对话框中的mat-dialog-content中得到了一些奇怪的行为。

我想展示一些工具提示（不是角度材料工具提示，而是来自ng-bootstrap库的那些，因为我希望它们具有一些可点击的内容）。当它们向右溢出时，我现在得到一个滚动条，这不是所希望的行为。

我覆盖了默认样式

.mat-dialog-content {
    overflow-x: visible !important;
}

我仍然得到滚动条和浏览器开发工具的检查显示我：

我觉得很奇怪。更令人沮丧的是：当我只是为了“隐藏”交换“可见”时，它显然也不是理想的行为。

Answer 1

position:absolute既适用于容器（.tooltip），也适用于.tooltiptext。相关的CSS是：

.tooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  top: -5px;
  left: 105%; 
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

你可以检查working demo here

我可以通过将css更改为以下内容来重新创建我根据您的问题复制的问题：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

Answer 2

我使用的是ng-bootstrap库，非常简单的解决方案是在工具提示触发器中添加container =“body”。