CODEWITHSUNDEEP
css
benhowdle89
benhowdle89

Reputation: 37464

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

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;   
}

Upvotes: 16

Views: 24013

Answers (7)

Umesh
Umesh

Reputation: 529

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>

Upvotes: 3

Luizgrs
Luizgrs

Reputation: 4873

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.

Upvotes: 10

Nejc Lepen
Nejc Lepen

Reputation: 365

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

Upvotes: 0

Dogan Sur
Dogan Sur

Reputation: 19

You can set child's position to fixed.

Upvotes: -1

Monstr92
Monstr92

Reputation: 404

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.

Upvotes: 0

feeela
feeela

Reputation: 29932

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.

Upvotes: 0

Faust
Faust

Reputation: 15404

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.

Upvotes: 17

Related Questions