title: Override overflow hidden of parent element
body: <pre><code>&lt;div style="overflow:hidden;"&gt;  
          &lt;div class="facepile"&gt;
              &lt;div class="members"&gt;
                  &lt;ul class="listFace"&gt;
  
                          &lt;li class="indFace"&gt;
                              &lt;div class="face"&gt;                                  
                                  &lt;img src="/facepile/nopicture.png"&gt;
                                  &lt;div class="IDLE"&gt;&lt;/div&gt;
                                  &lt;div class="tip"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="tooltip"&gt;
                                  &lt;div class="msgLeft"&gt;
                                      &lt;div class="name"&gt;cFoo&lt;/div&gt;
                                      &lt;div class="city"&gt;ERT, MA&lt;/div&gt;
                                      &lt;div class="sendMsg"&gt;Send Msg&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="favRight"&gt;
                                      &lt;img src="favorite.png"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="clear"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/li&gt;
  
  
                          &lt;li class="indFace"&gt;
                              &lt;div class="face"&gt;                                  
                                  &lt;img src="nopicture.png"&gt;
                                  &lt;div class="IDLE"&gt;&lt;/div&gt;
                                  &lt;div class="tip"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="tooltip"&gt;
                                  &lt;div class="msgLeft"&gt;
                                      &lt;div class="name"&gt;Rubynanny S.&lt;/div&gt;
                                      &lt;div class="city"&gt;Newton, MA&lt;/div&gt;
                                      &lt;div class="sendMsg"&gt;Send Msg&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="favRight"&gt;
                                      &lt;img src="/maybe.png?"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="clear"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/li&gt;
  
  
                  &lt;/ul&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
  </code></pre>
  
  <p>          </p>
  
  <p>CSS:</p>
  
  <pre><code>    .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}
  </code></pre>
  
  <p>the tooltip which has to override the overflow hidden property of the parent so its shown with out a cut is it possible.</p>