Hovered element to overflow out from an overflow:hidden element css

Question

I have made a fiddle for reference: http://jsfiddle.net/kLFn9/

The overflow:hidden in question is highlighted.

Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?

Relevant CSS:

div {
    width:500px;
    height:200px;
    background:red;   
    margin: 50px;
    overflow: hidden; /* this rule */
}

span:hover:after {
    content: attr(data-name); 
    color: black;
    position: absolute;
    top: -150px;;
    left: 0;   
}

To bypass overflow:hidden, you can trick it .. see: stackoverflow.com/a/29687454/2165415 — T.Todua
– T.Todua, Commented Jun 9, 2015 at 14:18
If you are okay with the span also popping out, it can be done: jsfiddle.net/h27a77j7 — Tarnay Kálmán
– Tarnay Kálmán, Commented Feb 22, 2018 at 12:47

Community · Accepted Answer · 2017-05-23 12:33:39Z

17

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered May 4, 2012 at 9:42

Faust

15.5k10 gold badges58 silver badges116 bronze badges

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

1 Comment

benhowdle89 Over a year ago

As this is the only answer that seemed to understand what I was asking, correct!

Luizgrs · Accepted Answer · 2017-07-03 19:52:37Z

10

+500

You can use margin-top and padding-top.

padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.

It will look like you're escaping the overflow, but in fact you're not.

div {
    width:500px;
    height:200px;
    background:red;
    margin: 50px;
    overflow: hidden; /* this rule */

    background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
    padding-top: 200px; /* space required to display the tooltip */
    margin-top: -150px; /*200px - 50px of the original margin*/
}
    
span {
 background: blue;
 color: white;
 position: relative;
 top:100px;  
 display:block;   
 width: 100px;  
 margin: auto;    
}
    
span:hover:after {
    content: attr(data-name); 
    color: black;
    position: absolute;
    top: -150px;;
    left: 0;   
}

<div>
<span data-name="here">hover</span>
</div>

This may introduce pointer events problems, but you can fix them using pointer-events then.

answered Jul 3, 2017 at 19:52

Luizgrs

4,8911 gold badge24 silver badges31 bronze badges

1 Comment

jmoreno Over a year ago

When used with right and left for scrolling, my content didn’t stay in the box. But this at least works vertically.

Umesh · Accepted Answer · 2020-07-05 02:52:32Z

3

I am using simple z-index for force the element hovered to escape the parent element. Please check

div {
 width:500px;
height:200px;
 background:red;   
    margin: 50px;
    overflow: hidden; /* this rule */
}

span {
 background: blue;
color: white;
    position: relative;
 top:100px;  
display:block;   
width: 100px;  
margin: auto;    
}

span:hover:after {
 content: attr(data-name); 
color: black;
 position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px;  /* Here I replaced top -150px  to 10px */
 left: 250px;  /* Here I replaced positionleft 0 to 250px */
 z-index:99999;} /* Here I added new z-index property to 99999 */

<div>
<span data-name="here">hover</span>
</div>

answered Jul 5, 2020 at 2:52

Umesh

5295 silver badges11 bronze badges

1 Comment

SamB Over a year ago

This does work with fixed positioning but not with absolute

feeela · Accepted Answer · 2012-05-04 09:57:30Z

0

There is no way using plain CSS to overflow a parent elements borders with a child, if it was set to overflow:hidden;. On possible CSS option is to use a sibling element to that one which has overflow:hidden; set and show that as popup.

answered May 4, 2012 at 9:57

feeela

30k7 gold badges61 silver badges73 bronze badges

Comments

Monstr92 · Accepted Answer · 2012-05-04 09:57:50Z

0

I'm not sure what your trying to get at, but I recreated a tooltip framework for you to view. It's basically smoke and mirrors where I call :hover and the .class associated with it.

http://jsfiddle.net/WE8Dw/

Hope this helps.

edited May 4, 2012 at 9:57

answered May 4, 2012 at 9:51

Monstr92

4049 silver badges26 bronze badges

1 Comment

feeela Over a year ago

"you can't pair up :before and :after tags with another :hover" Yes you can! That is valid CSS.

Nejc Lepen · Accepted Answer · 2017-02-07 16:03:07Z

0

In some cases you can escape with div{position: absolute;}

answered Feb 7, 2017 at 16:03

Nejc Lepen

3654 silver badges5 bronze badges

Comments

Dogan Sur · Accepted Answer · 2013-11-07 14:13:18Z

-1

You can set child's position to fixed.

answered Nov 7, 2013 at 14:13

Dogan Sur

191 bronze badge

Collectives™ on Stack Overflow

Hovered element to overflow out from an overflow:hidden element css

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related