Tooltip being cropped out even though with a high z-index

Question

I've tried all ways to make the tooltip appear on the most highest layer but it fails on me. Any kind help would be very much appreciated :)

Refer to:

This is the html:

          <div class="frame">
                            <div class="img-box">
                              <a href="knifeattack-to-check-for/927128.html" videoID="V3Mmk0bTppAXMtzWFXcelFsEjTNOWnWu" contentId="927128"
               category="Videos" description="Knifeattack to check for long length time, long long knife attack, long long" date="14 Mar 2014">
                                  <img src="592194024001.jpg" alt="" width="115" height="65"  class="pdd-items" />
                <span class="play-ico">play</span>
              <span class="video-txt">00:36</span>
                                </a>
                                <span class="txt">Mar 2014</span>
                            </div>
                            <div class="txt-box">
            <div class="maintainhere">
              <div id="playlistid-927128" class="toggle addtoplaylist" status="0" videoContentId="927128">
                <div class="addtoplaylist-video">
                  <span  class="addplaylisticonimg-newsvideo"></span>
                  <a href="javascript:void(0)"><span class="addtoplaylist-videotext"> Add To Playlist!</span></a>
                </div>

                <div class="viewplaylist-video">
                  <span class="viewplaylisticonimg-newsvideo"></span>
                  <a href="javascript:void(0)"><span class="viewplaylist-videotext"> View Playlist!</span></a>
                </div>
              </div>
            </div>

                            <h3><a href="927128.html" videoID="3339636532001" contentId="927128" class="video-title-in-section"
               category="Videos" description="Knifeattack to check for long length time, long long knife attack, long long" date="14 Mar 2014">
                            Knifeattack to check for long length time, long long knife attack, long long</a></h3>
                        </div>
                    </div>

The css:

.addtoplaylist-videotext:before{    /* Tooltip arrow */
 position: absolute;
 bottom: -8px;
 left: 80%;
content: "";
 border-color: #222 transparent transparent transparent;
 border-width: 6px 6px 0 6px;
 border-style:solid;
 border-top: 10px solid rgba(0, 0, 0, 0.6);


}
.addtoplaylist-videotext{        /* Tooltip text */
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -30px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height:15px;
text-align:center;
cursor:pointer;
display:none;
}
.viewplaylist-videotext:before{    /* Tooltip arrow */
 position: absolute;
 bottom: -8px;
 left: 80%;
content: "";
 border-color: #222 transparent transparent transparent;
 border-width: 6px 6px 0 6px;
 border-style:solid;
 border-top: 10px solid rgba(0, 0, 0, 0.6);

}
.viewplaylist-videotext{             /* Tooltip text */
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -30px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height:15px;
text-align:center;
cursor:pointer;
display:none;
} 


.frame {
 position:relative; z-index:2; 
}

Answer 1

You'll need to modify the css of the containing div, .video-news-box

from:

 .video-news-box {
  padding: 0;
  margin: 0;
  float: left;
  overflow: auto;
  height: 474px;
  position: relative;
  z-index: 2;
  width: 36%;
  -webkit-overflow-scrolling: touch;
  background: #444;
}

to :

.video-news-box {
  padding: 0;
  margin: 0;
  float: left;
  overflow: visible; /* this is changed from auto to visible */
  height: 474px;
  position: relative;
  z-index: 2;
  width: 36%;
  -webkit-overflow-scrolling: touch;
  background: #444;
}