CSS工具提示Div和溢出隐藏

Question

我有一个侧边栏，里面是一个项目列表，在其中一些我会有一个div /工具提示，将出现，但我无法得到工具提示显示，因为溢出 - x：隐藏

有没有办法让.gps-tooltip看到它在我的小提琴中？

jsFiddle

HTML

<div class="menu_side"> 
    <div class="wrapper"> 
     <ul> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li> 
       <input type="text" name="data_gpd" placeholder="That tooltip should be viewable"> 
       <div class="gps-tooltip"> 
        <input type="text"> 
       </div> 
      </li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 
    </div><!-- /.wrapper --> 
</div> 

CSS

html, body { 
    min-width: 1009px; 
    min-height: 670px; 
    overflow: hidden; 
    height: 100%; 
    background-color: #f0f0f0; 
    font-family: 'Droid Sans', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    margin: 0; 
    font-size: 75%; 
    line-height: 1.5; 
    position: absolute; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

li { 
    font-size: 16px; 
    line-height: 24px; 
} 
ul, ol { 
    list-style: none; 
    list-style-image: none; 
    margin: 0; 
    padding: 0; 
} 
.menu_side { 
    top: 80px; 
    opacity: .9; 
    display: block; 
    width: 300px; 
    z-index: 10; 
} 
    .menu_side .wrapper { 
     width: 299px; 
     height: 100%; 
     background-color: #f8f8f8; 
     border-right: 1px solid #d3d3d3; 
     overflow-y: auto; 
     overflow-x: hidden; 
     z-index: 5; 
    } 
     .menu_side .wrapper li { 
      border-bottom: 1px solid #d3d3d3; 
      padding: 10px; 
      position: relative; 
      float: left; 
      width:100%; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      transition: background .1s ease-in 
     } 
     .menu_side .wrapper li:hover { 
      background: #f0f0f0; 
     } 


.gps-tooltip { 
    padding: 10px; 
    background: #fff; 
    border: 1px solid #d3d3d3; 
    position: absolute; 
    right: -270px; 
    z-index: 15; 
    top:0; 
} 
input[type=text]{ 
       font-size: 12px; 
       font-weight: 700; 
       letter-spacing: 1px; 
       background: #d3d3d3; 
       color: #fff; 
       display: inline; 
       text-align: left; 
       text-shadow: none; 
       width: 244px; 
       padding: 8px; 
       position: relative; 
       float: left; 
       border: none; 
       -webkit-appearance: none; 
       outline: none; 
      } 

.gps-tooltip:after, .gps-tooltip:before { 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.gps-tooltip:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-right-color: #ffffff; 
    border-width: 10px; 
    margin-top: -10px; 
} 
.gps-tooltip:before { 
    border-color: rgba(211, 211, 211, 0); 
    border-right-color: #d3d3d3; 
    border-width: 11px; 
    margin-top: -11px; 
} 

Answer 1

我假设输入字段<input type="text" name="data_gpd" placeholder="That tooltip should be viewable">是不应该在你的jsfiddle的列表项。

但我对你的css做了一些小的改动，删除溢出将是你必须做的第一件事情，使工具提示出现。据我所知，没有其他方法可以隐藏溢出。

.menu_side .wrapper { 
    background-color: #F8F8F8; 
    border-right: 1px solid #D3D3D3; 
    display: block; 
    height: 100%; 
    width: 299px; 
    z-index: 5; 
} 
.menu_side .wrapper li { 
    -moz-box-sizing: border-box; 
    background-color: #FFFFFF; 
    border-bottom: 1px solid #D3D3D3; 
    padding: 10px; 
    position: relative; 
    transition: background 0.1s ease-in 0s; 
} 
.gps-tooltip { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #D3D3D3; 
    left: 100%; 
    padding: 10px; 
    position: absolute; 
    top: 0; 
    z-index: 15; 
}