Question

我有两个div包含一个输入框和一个图标，当悬停时显示工具提示文本。由于我需要将divs叠加在一起，所以他们有'position：relative;'。当我将鼠标悬停在第一个Tooltip图标上时，Tooltip文本太大而无法包含在其包装div中。但是，它不是完全可见的文本，而是隐藏在第二个包装div下。

我希望我的视觉设计与它完全相同，唯一的区别是工具提示在目前正在掩埋它的div之上。如果不对我的代码进行大修，有没有办法解决这个问题？

https://jsfiddle.net/jlcollier/nw45knLy/1/

HTML：

    <!DOCTYPE html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="inputblock">
        <input class="inputseperate" type="text" name="a"><br>
        <div class="help-tip">
          <p>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa</p>
        </div>
      </div>
      <div class="inputblock">
        <input class="inputseperate" type="text" name="b"<br>
        <div class="help-tip">
          <p>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb</p>
        </div>
      </div>
    </body>
    </html>

CSS：

    .inputseperate {
        width:70%;
    }

    .inputblock {
        margin-bottom:30px;
        width:100%;
        background-color: #ccc;
        border-radius: 5px 5px 5px 5px;
        position: relative;
    }

    .help-tip{
        position: absolute;
        top: 0px;
        right: 5px;
        text-align: center;
        background-color: #333;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 26px;
        cursor: default;
    }

    .help-tip:before{
        content:'?';
        font-weight: bold;
        color:#fff;
    }

    .help-tip:hover p{
        display:block;
        transform-origin: 100% 0%;
    }


    .help-tip p{
        display: none;
        text-align: left;
        background-color: #1E2021;
        padding: 20px;
        width: 300px;
        position: absolute;
        border-radius: 3px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        right: -4px;
        color: #FFF;
        overflow: visible;
        font-size: 13px;
        line-height: 1.4;
    }

    .help-tip p:before{
        position: absolute;
        content: '';
        width:0;
        height: 0;
        border:6px solid transparent;
        border-bottom-color:#1E2021;
        overflow: visible;
        right:10px;
        top:-12px;
    }

    .help-tip p:after{
        width:100%;
        height:40px;
        content:'';
        position: absolute;
        overflow: visible;
        top:-40px;
        left:0;
    }

Answer 1

将Financing::MerchantsController属性添加到z-index

fiddle

＆＃13;

.help-tip

＆＃13;

.inputseperate {
  width: 70%;
}

.inputblock {
  margin-bottom: 30px;
  width: 100%;
  background-color: #ccc;
  border-radius: 5px 5px 5px 5px;
  position: relative;
}

.help-tip {
  position: absolute;
  top: 0px;
  right: 5px;
  text-align: center;
  background-color: #333;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
  z-index: 1;
}

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff;
}

.help-tip:hover p {
  display: block;
  transform-origin: 100% 0%;
}

.help-tip p {
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 20px;
  width: 300px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  right: -4px;
  color: #FFF;
  overflow: visible;
  font-size: 13px;
  line-height: 1.4;
}

.help-tip p:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E2021;
  overflow: visible;
  right: 10px;
  top: -12px;
}

.help-tip p:after {
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  overflow: visible;
  top: -40px;
  left: 0;
}

＆＃13;

如何防止工具提示文本显示在具有相对定位的相邻div下？

1 个答案: