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.

abgregs · Accepted Answer · 2023-02-04 18:22:11Z

4

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.

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.

edited Feb 4, 2023 at 18:22

answered Nov 10, 2022 at 19:20

abgregs

1,3851 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user9102437 Over a year ago

That looks great. Could you, please, elaborate on how did you achieve this and why this works?

user9102437 Over a year ago

Wait, this once again is achieving tooltip with hovering over the box itself, but I am rather interested in hovering over the text

abgregs Over a year ago

This was a bit unclear from your question, but I think I'm following you now. To do that, we can simply target the element containing the text on hover, rather than surrounding container. I updated the answer to hopefully better explain and illustrate this. You can see that I just changed .box:hover to relative-container:hover to achieve this. Does that help?

user9102437 Over a year ago

Sorry for the confusion. This looks like a great solution, now for sure :). You may also consider making the relative-container smaller to make an illusion of hovering over text more believable.

user9102437 Over a year ago

Also, I know that it is kind of unrelated to this question, but is there a way to make the tooltip above the text?

|

John Li · Accepted Answer · 2022-11-10 19:49:02Z

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>

edited Nov 10, 2022 at 19:49

answered Nov 10, 2022 at 19:17

John Li

7,4973 gold badges7 silver badges29 bronze badges

2 Comments

user9102437 Over a year ago

Nice solution. Is there any way to do it without setting the text in CSS? I am planning to apply it to many elements and they all require different tooltips.

John Li Over a year ago

For setting the text in HTML, the solution from @abgregs would be a better fit, it's a great example. This alternative solution does need a list of CSS classes to set the content, or set the content dynamically by JS. On the bright side though, you got the tip text to be directly related to the target text, not its container.

Jimmy · Accepted Answer · 2022-11-10 18:53:34Z

0

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

.box {
  overflow: visible;
 }

answered Nov 10, 2022 at 18:53

Jimmy

981 silver badge10 bronze badges

1 Comment

user9102437 Over a year ago

True, but this would also imply that the regular text in this box will get over the edge as well

Collectives™ on Stack Overflow

How to display element over its container in HTML?

3 Answers 3

Example

Example with Tooltip Position Above Text

Positioning Context

Showing/Hiding the Tooltip

8 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

Example with Tooltip Position Above Text

Positioning Context

Showing/Hiding the Tooltip

8 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related