css overflow visible only for y

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

Please can anyone help me with this. I am realy stuck with this :-((( — Kapka, May 11 '17 at 09:29
You have this problem because of http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue. this may be a solution for you: https://css-tricks.com/popping-hidden-overflow/ — ICE, May 14 '17 at 00:08
Thanks ICE but it dose not work ;-(. So I am wonder how others do this? — Kapka, May 14 '17 at 14:42

score 0 · Answer 1 · answered May 10 '17 at 12:41

0

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

answered May 10 '17 at 12:41

Deepak swain

3,380
1
30
26

I did it and still the same result :-(. I'm beginning to feel frustrated... – Kapka May 10 '17 at 19:19

score 0 · Accepted Answer · answered May 14 '17 at 15:01

0

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

answered May 14 '17 at 15:01

ICE

1,667
2
21
43

1

OMG I am so stupid!!! :-). I have tried it befoure but it was no resoult but I did not width:1170px :-). ICE again THANK YOU! – Kapka May 14 '17 at 15:24

css overflow visible only for y

2 Answers2