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/

Answer 1

你是對的。由於overflow屬性table-responsive，工具提示正在削減。將溢出屬性更改爲可見可解決問題。

.table-responsive { 
    overflow: visible; 
} 

雖然它可能會導致表上的奇怪行爲。

這裏是更新的小提琴鏈接。 https://jsfiddle.net/6axwzysp/