How to display element over its container in HTML?

Question

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.

Answer 1

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.

Per your comment, since you want the tooltip to appear only when hovering over the text, I'd recommend having your relative container wrap precisely around just the content you want to hover. To illustrate this, I added a border on the outer box versus where you decide to use the relative container.

Then, simply change box:hover to relative-container:hover to target the the appropriate element.

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

Example

.box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding: 10px;
}

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

.relative-container:hover .tooltip {
  display: block;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I have a little padding to give the text some room.
    </div>
    <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top of the box content containing text and take up the full width. I only appear when hovering over the box content (red outline), not the surrounding container (blue outline).
    </div>
  </div>
</div>

Is there a way to make the tooltip above the text?

Example with Tooltip Position Above Text

Sure, just read a bit about position: absolute; - you can position it with respect to the relative container however you like. Using this in combination with how you decide to position your actual content inside the container gives you many options, but you have to keep in mind the dynamic size of the tooltip based on content length, screen/browser dimensions, and location of hover target element and tooltip! :) JS can be handy here.

 .box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
 }

.tooltip {
  position: absolute;
  left: 0;
  /* minus surrounding container padding and border*/
  top: -34px;
  border: #1a7bd9 solid;
  min-width: 15vw;
  /* full width accounting for subtracting left/right margins from body in snippet (8x2 = 16) minus border widths and left padding of surrounding container (30 + 8 = 38)* - content is fluid though so up to you how you deal with it if the tooltip content grows bigger, can't just keep it on top without accounting for fact content is dynamic :) */
  width:calc(100vw - 54px);
  background-color: white;
  display: none;
}

.relative-container:hover .tooltip {
  display: inline;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I'm just an element with some text, so only hovering on the text brings up the tooltip.
    </div>
    <div class='tooltip'>
      I'm aligned with the top left of the box content, and I'm given some additional width to overflow it. I'm mostly on top of the text - that is if the content isn't too long and screen size not too narrow! :)
    </div>
  </div>
</div>

In practice, you may find that placing the tooltip directly over the hovered content is undesirable (if it covers it up, user can't easily reference what they just hovered over while looking at tooltip). Also, as mentioned above, content is fluid and needs space to run, so it will overflow somewhere depending on its length and other factors.

Positioning Context

The takeaway is just to think of your relative container as the reference point for the absolutely positioned tooltip. You generally don’t need or want to style it much in most cases, just give it a position of relative and then let the child element(s) dictate size/positioning of content inside.

More on positioning context here.

Showing/Hiding the Tooltip

The other consideration is whether to remove the tooltip from the document flow (ex. display property) and/or change the visibility or opacity. I've just used display to remove and add the tooltip, which is the simple approach. This ensures that when hovering over the area taken up by the tooltip itself (which may extend outside the original hover text bordered in red) but before hovering on the actual text, the tooltip doesn’t unintentionally show. I also set the tooltip cursor to pointer during hover.

Other approaches probably fall outside the scope of what you're asking, but thought it was worth mentioning there are considerations here.

Answer 2

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>

Answer 3

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

.box {
  overflow: visible;
 }