Как сделать overflow-x видимым в содержимом диалога углового материала

Question

Я получаю странное поведение с mat-dialog-content в диалоговых окнах угловых материалов.

Я хочу показать некоторые всплывающие подсказки (не всплывающие подсказки с угловым материалом, а подсказки из библиотеки ng-bootstrap, поскольку я хочу, чтобы они содержали некоторый кликабельный контент). Когда они переполняют вправо, прямо сейчас, я получаю полосу прокрутки, которая не является желаемым поведением.

Я переписал стиль по умолчанию с

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

Я все еще получаю полосу прокрутки, и проверка с помощью инструментов разработчика браузера показывает мне это:

Что я нахожу очень странным. Еще большее разочарование: когда я просто заменяю «видимое» на «скрытое», это работает, но, очевидно, также не является желаемым поведением.

Answer 1

Я использовал библиотеку ng-bootstrap, и очень простым решением было добавить container = "body" к триггерам всплывающей подсказки.

Answer 2

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;
}

Вы можете проверить рабочий демо здесь

Проблема, которую я повторил в соответствии с вашим вопросом, может быть воссоздана путем изменения CSS на:

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