CODEWITHSUNDEEP
htmlcss
JCollier
JCollier

Reputation: 1179

How do I prevent Tooltip text from being displayed under a neighboring div with relative positioning?

I have two divs that wrap both an input box and an icon that displays Tooltip text when hovered over. Due to me needing to have the divs stack on each other, they have 'position: relative;'. When I hover over the first Tooltip icon, the Tooltip text is too large to be contained within its wrapper div. However, instead of the text being completely visible, it gets buried under the second wrapper div.

I want my visual design to be exactly the same as it is, the only difference being that the Tooltip rises on top of the div that is currently burying it. Is there any way to go about this without doing an overhaul of my code?

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

Upvotes: 0

Views: 183

Answers (1)

sol
sol

Reputation: 22949

Add the z-index property to .help-tip

fiddle

.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;
}
<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<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<br>bbbbbbbbb</p>
  </div>
</div>

Upvotes: 1

Related Questions