我面临问题引导表响应

Question

I am having some problem with bootstrap table responsive.

I have tried some code here https://codepen.io/arindamx01/pen/gJOqxK I need full tooltip visible. I have tried without .table-responsive class. Without table responsive class it works well I mean I can see the tooltip by hovering on time. but when I add .table-responsive I can't see the total tooltip. A long scroll appear in that table what should I have to do ... please help. my expected ans like to be

Answer 1

Change following css to relative to absolute

.tooltipItem_dist {
    position: absolute;
}

https://codepen.io/kashmiriguide/pen/gJOyjW

Answer 2

您可以简单地使用bootstrap .table-responsive{-sm|-md|-lg|-xl} 断点 ：

Answer 3

Please have a look at the below solution update your css accordingly.

.table-responsive { overflow-x: visible }
@media screen and (max-width: 767px) { 
.table-responsive { overflow-y: visible }
}

Answer 4

The "problem" (notice the quote) is that by using .table-responsive in your wrapper <div> changes it's default overflow behavior. So when your tooltip appears it gets trap inside your <div class="table-responsive"> wrapper. To solve this just set the overflow: visible; to it.

About possible implications, well you will lose the ability to scroll horizontally on mobile, in that case you can write media query to restore the functionality on mobile devices, because you will not need the tooltip on a mobile anyway.

https://codepen.io/jose-guzman-ojeda/pen/wbvZEp

Answer 5

Try these solutions

Method 1:

.tooltipItem_dist{
  position: absolute;
}

It will be positioned related directly to the HTML element (the page itself).

An important thing to keep in mind while using absolute positioning is to make sure it is not overused, otherwise, it can lead to a maintenance nightmare.

Method 2:

.table-responsive{
  overflow: visible;
}

I will go with method 2.

Answer 6

你有尝试添加元视口吗？

<meta name="viewport" content= "width=device-width, initial-scale=1.0"> 

Answer 7

 .tooltipItem_dist:hover .tooltipItem { visibility: visible; opacity: 1; } .tooltipItem_dist{ position: relative; } .tooltipItem_dist .tooltipItem { top: 100%; } .tooltipItem { color: #fff; position: absolute; top: calc(100% - 30px); width: 160px; background: #333; z-index: 1; text-align: center; padding: 10px; border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; left: 50%; transform: translate(-50% , 0); -moz-transform: translate(-50% , 0); -webkit-transform: translate(-50% , 0); opacity: 0; visibility: hidden; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } 

 <div class="table table-striped table-bordered dt-responsive nowrap"> <table class="table table-hover noMargin arUinqueteable"> <thead> <tr> <th>POS</th> <th>NAME</th> <th>AV PACE</th> <th>TIME</th> <th>&nbsp;</th> <th>&nbsp;</th> </tr> </thead> <tbody class="results_section"> <tr class="resultTotalTr "> <!--log_user_active--> <td class="blue">1</td> <td class="blue">Subha Dev <!--1--><!--Limpopo--></td> <td class="blue">00:07:23</td> <td class="black tooltipItem_dist">04:04:04 <div class="tooltipItem"> <ul> <li><span>SWIM</span> 04:23:04</li> <li><span>T1</span> sdfsdf</li> <li><span>BIKE</span></li> <li><span>T2</span></li> <li><span>RUN</span></li> <li><span>TOTAL</span></li> </ul> </div> </td> <td><!--<span>PB</span>--></td> <td><!--<i class="fa fa-check-circle-o"></i>--></td> </tr> <tr class="resultTotalTr "> <!--log_user_active--> <td class="blue">2</td> <td class="blue">Subha Dev <!--1--><!--Limpopo--></td> <td class="blue">00:09:43</td> <td class="black tooltipItem_dist">05:21:01 <div class="tooltipItem"> <ul> <li><span>SWIM</span> 04:23:04</li> <li><span>T1</span> sdfsdf</li> <li><span>BIKE</span></li> <li><span>T2</span></li> <li><span>RUN</span></li> <li><span>TOTAL</span></li> </ul> </div> </td> <td><!--<span>PB</span>--></td> <td><!--<i class="fa fa-check-circle-o"></i>--></td> </tr> <tr class="resultTotalTr "> <!--log_user_active--> <td class="blue">3</td> <td class="blue">Subha Dev <!--1--><!--Limpopo--></td> <td class="blue">00:18:56</td> <td class="black tooltipItem_dist">10:25:01 <div class="tooltipItem"> <ul> <li><span>SWIM</span> 04:23:04</li> <li><span>T1</span> sdfsdf</li> <li><span>BIKE</span></li> <li><span>T2</span></li> <li><span>RUN</span></li> <li><span>TOTAL</span></li> </ul> </div> </td> <td><!--<span>PB</span>--></td> <td><!--<i class="fa fa-check-circle-o"></i>--></td> </tr> </tbody> </table> </div>