Override overflow hidden of parent element

Question

<div style="overflow:hidden;">  
        <div class="facepile">
            <div class="members">
                <ul class="listFace">

                        <li class="indFace">
                            <div class="face">                                  
                                <img src="/facepile/nopicture.png">
                                <div class="IDLE"></div>
                                <div class="tip"></div>
                            </div>
                            <div class="tooltip">
                                <div class="msgLeft">
                                    <div class="name">cFoo</div>
                                    <div class="city">ERT, MA</div>
                                    <div class="sendMsg">Send Msg</div>
                                </div>
                                <div class="favRight">
                                    <img src="favorite.png">
                                </div>
                                <div class="clear"></div>
                            </div>

                        </li>


                        <li class="indFace">
                            <div class="face">                                  
                                <img src="nopicture.png">
                                <div class="IDLE"></div>
                                <div class="tip"></div>
                            </div>
                            <div class="tooltip">
                                <div class="msgLeft">
                                    <div class="name">Rubynanny S.</div>
                                    <div class="city">Newton, MA</div>
                                    <div class="sendMsg">Send Msg</div>
                                </div>
                                <div class="favRight">
                                    <img src="/maybe.png?">
                                </div>
                                <div class="clear"></div>
                            </div>

                        </li>


                </ul>
            </div>  
        </div>

CSS:

    .facepile {float: left; width: 186px; border:2px solid #757373; margin-right: 10px; padding-bottom: 9px; display: block;}
.facepile .myHeaderGrey {background: url("/img/facepile/Header.png?v=1") no-repeat scroll 0 0 transparent;   height: 37px;  width: 186px;}
.facepile .myHeaderGrey .myHeaderReferTitle {font-size:14px; margin:0 0 0 12px;}
.facepile .members {padding-top:9px;}
.facepile .members ul.listFace {margin:0;padding:0 9px 0 9px; display: block;}
.facepile .members ul.listFace li.indFace {margin: 1px 1px 0 0; float: left;  position:relative; display: block;}
.facepile .members ul.listFace li.indFace .face {display:inline-block; width:40px; height:40px; background-color:#e4e5e6;}
.facepile .members ul.listFace li.indFace .face img{vertical-align: bottom;}
.facepile .members ul.listFace li.indFace .face .IDLE {background: url("/img/facepile/orangedot.png?v=1") no-repeat scroll 0 0 transparent; height:8px; width:8px; border-width:0 1px 1px 0; border-color:#fff; position: absolute; bottom:0; right:0;}
.facepile .members ul.listFace li.indFace .face .ONLINE {background: url("/img/facepile/greendot.png?v=1") no-repeat scroll 0 0 transparent; height:8px; width:8px; border-width:0 1px 1px 0; border-color:#fff; position: absolute; bottom:0; right:0;}

.facepile .members ul.listFace li.indFace:hover .face .tip{background: url("/img/facepile/tooltip_point.png?v=1") no-repeat scroll center top;  height: 9px; width: 40px; position: absolute; top:-1px; left:0px; z-index:100;}

.facepile .members ul.listFace li.indFace .tooltip {background-color:#e4e5e6; padding:5px; display:none; position:absolute; top:-57px; left:0; width:150px; border:1px solid #757373; z-index:90;}
.facepile .members ul.listFace li.indFace:hover .tooltip {display:inline-block;}
.facepile .members ul.listFace li.indFace .tooltip .msgLeft {float:left;}
.facepile .members ul.listFace li.indFace .tooltip .msgLeft .sendMsg {padding-top:10px; display:inline;}
.facepile .members ul.listFace li.indFace .tooltip .favRight {float:right;}
.facepile .members ul.listFace li.indFace .tooltip .clear {height:0}

the tooltip which has to override the overflow hidden property of the parent so its shown with out a cut is it possible.

Answer 1

If you need to use only CSS for that then it is impossible, refer to this for information: SO - Is there a CSS parent selector?

If you are good with using javascript, then you can access parent element by using parentNode. So if you are showing the tooltip with javascript, the function would look like this:

function showTooltip() {
    var tooltipElement = createTooltipNodeOrSomething(someParams);
    var parentElement = tooltipElement.parentNode;  
    parentElement.style.overflow = "both";
}