У меня возникла проблема, когда, когда я пытаюсь использовать всплывающую подсказку для набора элементов, которые создаются рядом друг с другом, заголовки для элементов, которые создаются впоследствии, отображаются поверх всплывающей подсказки. Я пытался возиться с z-индексом, но, похоже, это мало что дает - я не уверен, что может быть причиной этого.
.header {
vertical-align: bottom;
}
.rotated-header .tooltip-text {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 10;
opacity: 0;
transform:rotate(45deg);
transform-origin: left;
width:25em;
white-space: normal;
}
.rotated-header .tooltip-text::after {
content: "";
position: absolute;
border-style: solid;
z-index: 11;
}
.rotated-header:hover .tooltip-text {
visibility: visible;
position: absolute;
opacity: 1;
z-index: 10;
}
.schedule-header-tooltip {
white-space: nowrap;
pointer-events: auto;
position: absolute;
bottom: 0;
z-index: 1;
}
.rotated-header {
width:30px;
height:100px;
position:relative;
transform:
translate(1em, -1em)
rotate(315deg);
transform-origin:bottom;
pointer-events: none;
}
.tableFixHead {
overflow: auto;
height: 150px;
}
.tableFixHead thead tr {
position: sticky;
top: -2em;
background: white;
}
<div class = "tableFixHead">
<table>
<thead>
<tr>
<th class = "header">Asset</th>
<th class = "header">
<div class = "rotated-header">
<div class = "schedule-header-tooltip">
<span>Rotated row 1</span>
</div>
<div class = "tooltip-text">
<span>Name</span>Something extremely long and unwieldy
<span>Date</span>
<span>Age</span>
</div>
</div>
</th>
<th class = "header">
<div class = "rotated-header">
<div class = "schedule-header-tooltip">
<span>Rotated row 1</span>
</div>
<div class = "tooltip-text">
<span>Name:</span> Something extremely long and unwieldy
<span>Date</span>
<span>Age</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
</tbody>
</table>
</div>
Я не совсем уверен, есть ли лучший способ сделать всплывающую подсказку для этого
Все дело в контексте стека. Вы создаете новый контекст стека каждый раз, когда происходит что-то из перечисленного здесь . Это включает в себя любую относительную позицию с указанным z-индексом и преобразованиями. Итак, что происходит, так это то, что, поскольку вы создаете новый контекст стека (выглядит так, как будто вы вращаете текст), дочерний элемент, который является всплывающей подсказкой, позиционируется в индексе z для этого div, но следующая ячейка находится в другом стеке context и правило z-index в div в ячейке таблицы, которая содержит первую всплывающую подсказку, не применяется ко второй.
Если вы переместите панель инструментов как брата, вы можете заставить ее работать. Я удалил большую часть CSS, так что, надеюсь, вы сможете увидеть, что я делаю.
table {
margin-top: 100px;
}
th {
position: relative;
}
.tooltip-text {
display: none;
position: absolute;
top: -10%;
background-color: red;
color: white;
z-index: 100;
width: 200px;
}
.rotated-header:hover+.tooltip-text {
display: block;
}
.rotated-header {
transform: rotate(-45deg);
transform-origin: bottom left;
}
<div class = "tableFixHead">
<table>
<thead>
<tr class = "header">
<th>Asset</th>
<th>
<div class = "rotated-header">
Rotated row 1
</div>
<div class = "tooltip-text">
<span>Name:</span> Something extremely long and unwieldy
<span>Date</span>
<span>Age</span>
</div>
</th>
<th>
<div class = "rotated-header">
Rotated row 1
</div>
<div class = "tooltip-text">
<span>Name:</span> Something extremely long and unwieldy
<span>Date</span>
<span>Age</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
<tr>
<td>some</td>
<td>some</td>
<td>some</td>
</tr>
</tbody>
</table>
</div>