CSS：Bootstrap响应表类中的自定义工具提示

Question

我在Bootstrap的响应表中遇到自定义工具提示有问题。

工具提示的内容被表头截断。它似乎正在发生，因为overflow:auto。但是，我找不到任何更好的解决方案来保持表响应和工具提示的工作。

这就是它在其他地方的样子。

.custom-tooltip-hover {
    position: relative;
}

.custom-tooltip { /* hide and position tooltip */
    position: absolute;
    bottom: 100%;
    left: 0px;
    line-height: initial;
    visibility: hidden;
    z-index: 110;
    transition-delay: 0.33s;
    font-weight: initial;
    word-break: inherit; 
    white-space: normal;
}

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

.custom-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12%;
    width: 0; height: 0;
}

.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;
}

小提琴 https://jsfiddle.net/kristjanrei/74aa8x6u/