How to display element over its container in HTML?-CodePudding

I would like to make a custom tooltip for the element, but I have it contained in the box, which doesn't have enough space for the tooltip, so it just crops (well, technically I can scroll to reveal it because overflow is set to auto, but I would like it to be visible without doing that). Is there a way to make it pop over the edge? I have tried using z-index to no result.

Here is what I am talking about:

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

.tooltip:hover .tooltiptext {
  display: block;
}

<div class='box'>
  <div class='tooltip'> Hover for tooltip
    <div class='tooltiptext'>
      Wow, this is amazing, such an epic tooltip text
    </div>
  </div>
</div>

Edit: It is important that hover works on the element, not the box that it is in.

CodePudding user response：

Lot of ways to go about it, but if you're just looking for the tooltip to be visible outside the container, you don't need z-index or overflow. You just need to move your tooltip so it comes next in the positioning context inside of a relative container.

I attempted to organize the HTML and classes to be a bit more semantic and succinct for illustration. Hope that helps!

Example

.box {
position: relative;
  width: 100px;
  height: 100px;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding-top: 20px;
  padding-bottom: 20px;
  display: inline-block;
}

.tooltip {
  opacity: 0;
  max-width: 60vw;
  min-width: 15vw;
  position: absolute;
  left: 0;
  top: 22px;
  background-color: white;
  border-color: #1a7bd9;
  border-style: solid;
}

.box:hover .tooltip {
  opacity: 1;
}

<div class='box'>
  <div class='box-content'>
    Hover for tooltip
  </div>
  <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top left of the text inside the box and covering it.
  </div>
</div>

More on positioning context here.

CodePudding user response：

One way to implement this is to make a ::before pseudo-element that positioned above and next to the text being hovered.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border-style: solid;
  border-color: red;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: "Wow, this is amazing, such an epic tooltip text";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

.tooltip:hover::before {
  display: flex;
}

<div class='box'>
  <div class='tooltip'>
    Hover for tooltip
  </div>
</div>

CodePudding user response：

You can change overflow to be visible and it will pop over the edge.

.box {
  overflow: visible;
 }

CodePudding user response：

Create a container to separate your tooltip and the text. And don't nest the tooltip within the the element it is refering to. Do it like that:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 200;
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.box-container .tooltiptext {
  font-family: Roboto, Arial;
  position: absolute;
  background-color: gray;
  color: white;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 2px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 400;
}

.box-container:hover .tooltiptext{
  opacity: 1;
}

<div >
  <div >
    <div >Hover for tooltip</div>
  </div>
  <div >Wow, this is amazing, such an epic</div>
</div>

PS: I redesigned your tooltip