Question 199637 in Html Question posted in
Some basic documentation can be found here.

Html – Tooltip: overflow hidden is hold the child element content

The problem

I’m facing a problem when shifting the child element to the top of all content. I did a Sandbox to show what I’m trying to do (it’s just a simulation):
https://codesandbox.io/s/tooltip-overflow-9yx29s?file=/mystyle.css:104-124

  • I need to keep the overflow: hidden property in the container.
  • The Tooltip must be set inside the container div
div {
  outline: 1px solid black;
}

.container {
  position: relative;
  height: 50px;
  width: 500px;
  overflow: hidden;
  background-color: pink;
  display: grid;
  align-items: center;
}

.tooltip {
  z-index: 9999;
  top:0;
  background-color: lightcoral;
  position: absolute;
  height: 200px;
}
    <div class="container">
      <div class="tooltip">fancy Tooltip content</div>
    </div>

What I’m expecting:

with overflow: hidden; in container

enter image description here

I appreciate any support

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After trying a solution. The best option if you don't have a way to work around with parents with relative is using absolute with fixed: https://github.com/w3c/csswg-drafts/issues/4092#issuecomment-595247838

    Code

    .container {
  height: 50px;
  width: 500px;
  background-color: pink;
  display: grid;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.child {
  position: absolute;
  top: 100%;
}

.content {
  position: fixed;
  outline: 1px solid black;
  background-color: lightcoral;
  height: 200px;
}
      <div class="container">
    <div class="child">
      <div class="content">fancy Tooltip content</div>
    </div>
  </div>

    With this, you can add multiple tooltips without depending on a parent with no current position relation.


  2. 0

    there is one way.
    add parent div for ".container" and remove "position: relative" from ".container"
    and add it to ".grand-parent" and you have to control the height of the tooltip.

    .grand-parent {
  position: relative;
}
.container {
  height: 50px;
  width: 500px;
  background-color: pink;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.tooltip {
  z-index: 9999;
  top: -20px;
  background-color: lightcoral;
  position: absolute;
  height: fit-content;
}
     <div class="grand-parent">
      <div class="container clearfix">
        <div class="tooltip">fancy Tooltip content</div>
      </div>
    </div>

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search