Question

我遇到了这个问题 - 在添加.table-responsive类之后，表头工具提示丢失了overflow-x: auto - 将其设置为关闭会使其正常但会禁用表的响应。

我已经创建了代码片段来向您展示

https://jsfiddle.net/kristjanrei/74aa8x6u/

工具提示的默认代码

.container {
  padding: 200px;
}
.custom-tooltip-hover {
    position: relative;
}

.custom-tooltip { /* hide and position tooltip */
    position: absolute;
    bottom: 100%;
    left: 0px;
    background-color: #000;
    color: #fff;
    line-height: initial;
    visibility: hidden;
    border: 1px solid #fff;
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    z-index: 110;
    transition-delay: 0.33s;
    font-size: 13px;
    font-weight: initial;
    word-break: inherit; 
    font-size: 12px;
    white-space: normal;
}

.custom-tooltip.left {
    left: initial;
    right: 0px;
}

.custom-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12%;
    width: 0; height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.custom-tooltip.left:after {
    left: initial;
    right: 12%;
}

.custom-tooltip-hover:hover .custom-tooltip {
    visibility: visible;
    display: inline;
    transition-delay: 0.88s;
    -webkit-transition-delay: 0.88s; /* Safari */
}

.break-tooltip {
    word-break: break-all;
}

来自jsfiddle的破坏工具提示的片段。

它可以在其他任何地方使用

Answer 1

我已经在div面板上添加了它，它已经工作style="overflow:visible;

.container {
  padding: 200px;
}
.custom-tooltip-hover {
    position: relative;
}

.custom-tooltip { /* hide and position tooltip */
    position: absolute;
    bottom: 100%;
    left: 0px;
    background-color: #000;
    color: #fff;
    line-height: initial;
    visibility: hidden;
    border: 1px solid #fff;
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    z-index: 11000000;
    transition-delay: 0.33s;
    font-size: 13px;
    font-weight: initial;
    word-break: inherit; 
    font-size: 12px;
    white-space: normal;
}

.custom-tooltip.left {
    left: initial;
    right: 0px;
}

.custom-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12%;
    width: 0; height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.custom-tooltip.left:after {
    left: initial;
    right: 12%;
}

.custom-tooltip-hover:hover .custom-tooltip {
    visibility: visible;
    display: inline;
    transition-delay: 0.88s;
    -webkit-transition-delay: 0.88s; /* Safari */
}

.break-tooltip {
    word-break: break-all;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="custom-tooltip-hover">
    <div>
      Working header
    </div>

    <span class="custom-tooltip">
      Tooltip for head
    </span>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-body table-responsive"  style="overflow:visible;">
      <table class="table-hover">
          <thead>
            <tr>
              <th> 
                  <div class="custom-tooltip-hover">
                      <div>
                       Broken Header
                      </div>

                      <span class="custom-tooltip">
                        Tooltip for head
                      </span>
                   </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td> Content for head</td>
            </tr>
          </tbody>
       </table>
    </div>
</div>
</div>

Answer 2

如果你想隐藏溢出的内容的某些部分，那么你可以使用position：fixed作为.custom-tooltip类并将它放在js。

签出库tether（bootstrap也将它用于工具提示），有很多选项可以将元素附加到另一个元素。我认为这会容易得多。

CSS：.table-responsive类混淆了工具提示的内容[提供小提琴]

2 个答案: