複数列のレイアウト上にツールチップを配置する

Question

単純なCSS 3列レイアウトに絶対配置されたツールチップを追加しようとしていますが、ツールチップは常に後続の列によって切り捨てられます。

ツールチップは、ラッパー要素の上限または下限を上回ったり下回ったりすると、列間でブレークします。

ツールチップが常に列の上にあることを確認する方法はありますか？また、列をまたいで折り返さず、ラッパー要素の境界の外で実行できるようにする方法はありますか？

編集 -私はリストが不明/可変長となることを明確にすべき、と私は（3で、それを分割し、各セクションをラップすることによって）リストをフォーマットするのJavascriptに依存することを避けることを好むだろう可能なら。リストはスニペットと同様に垂直に折り返され、列を横切って横方向に折り返されます。

.wrapper { 
 
    display: block; 
 
    width: 50%; 
 
    background-color: white; 
 
    border: 2px solid red; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    column-gap: 2em; 
 
    -webkit-column-gap: 2em; 
 
    -moz-column-gap: 2em; 
 
    -webkit-column-rule: 2px solid red; 
 
    -moz-column-rule: 2px solid red; 
 
    column-rule: 2px solid red; 
 
    margin-bottom: 5em; 
 
} 
 

 
.wrapper span { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    padding: 1em; 
 
    cursor: pointer; 
 
    transition: 0.2s color linear 
 
} 
 

 
.wrapper span:hover { 
 
    color: red; 
 
} 
 

 
.wrapper span:hover .tooltip { 
 
    display: block; 
 
} 
 

 
.tooltip { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 50%; 
 
    padding: 1em; 
 
    border: 2px solid black; 
 
    color: white; 
 
    background-color: lightgray; 
 
}

<div class="wrapper"> 
 
    <span>item 1 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 2 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 3 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 4 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 5 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 6 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 7 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 8 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 9 <p class="tooltip">Tooltip!</p></span> 
 
    <span>item 10 <p class="tooltip">Tooltip!</p></span> 
 
</div>

Answer 1

JavaScriptを伴わなかった私は見つけることができる唯一のソリューションは醜いハックを使用していた - ことにより、ツールチップにtranslateZ(0);を追加すると、他の列の上に表示されます。

これは理想的ではありませんが、私の研究ではCSS列間のオーバーフローを許容する方法はまだありません。

Answer 2

問題は、あなたのツールチップがposition: absoluteですが、スパンではないです。この方法で動作させたい場合は、すべてのスパンをposition: absoluteにする必要があります。ここで

は、私がどうなるのかです：

代わりにこれらのCSSプロパティを使用する：

<div class="wrapper"> 
... 
</div> 
<div class="wrapper"> 
... 
</div> 
<div class="wrapper"> 
... 
</div> 

と変更：

-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 
column-gap: 2em; 
-webkit-column-gap: 2em; 
-moz-column-gap: 2em; 
-webkit-column-rule: 2px solid red; 
-moz-column-rule: 2px solid red; 
column-rule: 2px solid red; 

私はこのような3つの<div class="wrapper">の要素に分割します.wrapper CSSはこれらのプロパティを持っています：

display: inline-block; 
float: left; 

彼らは並んで座っている。

この場合、ツールチップのposition: absoluteは常に残りのHTMLよりも上になります。

---

EDIT：サーバー側レンダリング擬似コードの例（何JavaScriptは必要ありません）：

int column = 1; 

var firstColumn, secondColumn, thirdColumn; 
foreach (var item in items) { 
    if (column == 1) { firstColumn.Add(item); column = 2; continue; } 
    if (column == 2) { secondColumn.Add(item); column = 3; continue; } 
    if (column == 3) { thirdColumn.Add(item); column = 1; continue; } 
} 

<div class="wrapper"> 
// Loop through firstColumn, adding spans for each 
</div> 

<div class="wrapper"> 
// Loop through secondColumn, adding spans for each 
</div> 

<div class="wrapper"> 
// Loop through thirdColumn, adding spans for each 
</div>