Make Fully Visible One Element From Overflow:hidden Element

Please check http://jsfiddle.net/mtN6R/9/ .tooltip{ color:red; } .wrapper { overflow:hidden; height:50px; border:1px solid black; width:50px; position:relat

Solution 1:

I think what you want is to have just your content itself have overflow: hidden on it:

CSS:

.tooltip{
    color:red;
}
.wrapper {
    position:relative;
}
.inner {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
}

HTML:

<div class="wrapper">
    <divclass='tooltip'>A big tooltip which should be visible fully</div><divclass="inner">
        A lot of text<br>
        A lot of text<br></div></div>

Solution 2:

Sure, give tooltip an absolute position and then move things around as needed as in this jsFiddle example

.tooltip{
    color:red;
    position: absolute;
    top:0;
}
.wrapper {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
    margin-top: 20px;
}​