相关疑难解决方法(0)

具有绝对定位的工具提示元素被容器裁剪并溢出:自动

我在模态中有一个工具提示。

有没有办法可以避免工具提示被带有overflow它的容器剪掉?

我需要模态对话框来处理内容溢出,所以我无法从中删除overflow: auto

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  display: block;
  height: 50%;
  width: 50%;
  background: cyan;
  border: 1px solid;
  overflow: auto;
}

.tooltip {
  position: relative;
  color: red;
  text-decoration: underline;
}

.tooltip::after {
  display: none;
  content: 'Hello';
  position: absolute;
  left: -100%;
  top: -100%;
  height: 20px;
  width: 60px;
}

.tooltip:hover::after {
  display: inline-block;
  background: black;
  color: white;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="modal-dialog">
    <span …
Run Code Online (Sandbox Code Playgroud)

html javascript css flexbox

4
推荐指数
1
解决办法
3740
查看次数

标签 统计

css ×1

flexbox ×1

html ×1

javascript ×1