У меня следующая проблема: у меня есть таблица, в этой таблице есть куча ячеек. Некоторые из ячеек имеют всплывающие подсказки.
Подсказка появляется, если пользователь наводит курсор на указанную ячейку. Суть в том, что эта таблица имеет полосу прокрутки внизу, которая идет слева направо. Это потому, что содержимое слишком велико, чтобы уместиться на экране.
Если у меня есть позиция: абсолютная для всплывающей подсказки без относительного родителя, она показывает содержимое над полосой прокрутки (для чтения), но не следует полоса прокрутки.
Если у меня есть позиция: абсолютная для всплывающей подсказки с относительным родителем, она следует за полосой прокрутки, но скрывает содержимое.
<!DOCTYPE html>
<head>
<style>
thead > tr > td {
background-color: grey;
width: 150px;
height: 30px;
}
table{
table-layout: fixed;
}
.tooltipWrapper{
position:relative;
}
.tooltip{
position: absolute;
display:none;
top: 10px;
background-color: green;
}
.tooltipWrapper:hover .tooltip{
display:block;
}
.contentWrapper{
overflow-x: scroll;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="contentWrapper">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1-1</td>
<td>Content 1-2</td>
<td>Content 1-3</td>
<td>Content 1-4</td>
<td>Content 1-5</td>
<td>Content 1-6</td>
<td>Content 1-7</td>
<td>Content 1-8</td>
<td>Content 1-9</td>
<td>Content 1-10</td>
<td>Content 1-11</td>
<td>Content 1-12</td>
<td>Content 1-13</td>
<td>Content 1-14</td>
<td>Content 1-15</td>
<td>Content 1-16</td>
<td>Content 1-17</td>
<td>Content 1-18</td>
</tr>
<tr>
<td>Content 2-1</td>
<td>Content 2-2</td>
<td>
<div class="tooltipWrapper">
<div>Hover me!</div>
<div class="tooltip">Cool tips here!<br>Indeed, very cool tips<br>I do enjoy these tips</div>
</div>
</td>
<td>Content 2-4</td>
<td>Content 2-5</td>
<td>Content 2-6</td>
<td>Content 2-7</td>
<td>Content 2-8</td>
<td>Content 2-9</td>
<td>Content 2-10</td>
<td>Content 2-11</td>
<td>Content 2-12</td>
<td>Content 2-13</td>
<td>Content 2-14</td>
<td>Content 2-15</td>
<td>Content 2-16</td>
<td>Content 2-17</td>
<td>Content 2-18</td>
</tr>
</tbody>
</table>
</div>
</body>
Мой ожидаемый результат будет таким: если вы наведете указатель мыши на текст «Наведите меня» и прокрутите немного вправо, он последует за ним и покажет его над полосой прокрутки.
Спасибо!