css overflow visible only for y - html

Question

I am trying to overflow my tooltip over the slider section (y axis).
Under the slider I have another slider with 9 elements (every one have a tooltip)
I want the slider below to be width 1170px with 5 elements. The remaining items should be hidden.
My English is poor so I mad short video 24s https://vimeo.com/216830963
And here is the code
section#slider {
width: 100%;
overflow: hidden;
padding-top: 110px;
padding-bottom: 0px;
height: 482px;
}
.wrap {
position: relative;
margin: 3em 0;
}
/* Frame */
.frame {
height: 130px;
line-height: 130px;
overflow-x: hidden;
/*overflow: hidden !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 50px;
}
.frame ul li {
float: left;
width: 227px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: pointer;
/*border-right: 1px solid #00b5f6;*/
}
.frame ul li:hover {
color: #fff;
background: #00b5f6;
}
/* Scrollbar */
.scrollbar {
margin: 0 0 1em 0;
height: 2px;
background: #ccc;
line-height: 0;
}
.scrollbar .handle {
width: 100px;
height: 100%;
background: #292a33;
cursor: pointer;
}
.scrollbar .handle .mousearea {
position: absolute;
top: -9px;
left: 0;
width: 100%;
height: 20px;
}
/* setup tooltips */
.tooltip {
position: relative;
overflow: visible;
}
.tooltip:before,
.tooltip:after {
position: absolute;
display: inline-block;
opacity: 0;
pointer-events: none;
width: 225px;
overflow: visible;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: -145px;
left: 0px;
white-space: nowrap;
height: 130px;
max-width: 207px !important;
}
/* the animations */
/* expand */
.tooltip.expand:before {
transform: scale3d(.2, .2, 1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0, 6px, 0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
<section id="slider">
<img src="http://localhost/wh1/wp-content/uploads/2016/02/si.png">
</section>
<div style="width:1170px; height:180px; margin-left:auto; margin-right:auto;">
<div style="max-width: 100%;">
<div class="wrap" style="margin:15px 0 15px 0; ">
<div class="scrollbar">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame" id="basic">
<ul class="clearfix">
<li class="tooltip expand" data-title="Text tooltip">1</li>
<li class="tooltip expand" data-title="Text tooltip">2</li>
<li class="tooltip expand" data-title="Text tooltip">3</li>
<li class="tooltip expand" data-title="Text tooltip">4</li>
<li class="tooltip expand" data-title="Text tooltip">5</li>
<li class="tooltip expand" data-title="Text tooltip">6</li>
<li class="tooltip expand" data-title="Text tooltip">7</li>
<li class="tooltip expand" data-title="Text tooltip">8</li>
<li class="tooltip expand" data-title="Text tooltip">9</li>
</ul>
</div>
</div>
</div>
</div>
I don't know how to fix it. Please help if You can
Thanks

Answer 1

Because you want to have that tool tip showing on the top of the scroll frame, you need to include a new wrapper from that image slider on the top. I mean like this:
And the wrapper must be overflow-x: hidden;
With this approach you can make the tool tip visible and that overflow from the scrolling area hidden

Answer 2

Give #basic or .frame a specific width and then apply css Overflow property