Как заставить всплывающую подсказку CSS отображать автоматическое положение (сверху, справа, снизу, слева) внутри таблицы

Question

Я использую bootstrap4 и пользовательский CSS, я хочу отобразить всплывающую подсказку для элемента td и расположить ее сверху или справа или снизу или слева до положения элемента td? Здесь вы можете найти мои классы с помощью HTML-файла и CSS-файла, который всегда занимает верхнюю позицию.

Здесь я прилагаю свою кодовую ссылку к вам: Вот мой Codepen.

Ниже вы найдете мой код, который не дает правильного решения.

Это некоторый HTML-код:

<div class="container">
    <div class="col-6">
        <table class="table table-responsive">
            <tr>
                <td class="CellWithComment">
                    S
                    <span class="CellComment">
                        010620190528113002
                        <br>
                            55555
                        <br>
                        2019-05-2804:25:37
                    </span>
                <td>
                <td class="CellWithComment">
                    S
                    <span class="CellComment">
                        010620190528113002
                        <br>
                            55555
                        </br>
                        2019-05-2804:25:37
                    </span>
                <td>
            </tr>
        </table>
    </div>
</div>

Это мой CSS:

.CellWithComment {
 position: relative;
 }

.CellComment {
visibility: hidden;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 3px 7px;
position: absolute;
z-index: 1908;
bottom: 100%;
margin-left: -92px;
}
.CellComment::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.CellWithComment:hover span.CellComment {
 visibility: visible;
 }

Answer 1

Попробуйте, я думаю, это полезно для вас.

.CellComment:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.CellComment {
  visibility: hidden;
  background-color: black;
  color: #fff;
 text-align: left;
 border-radius: 6px;
 padding: 3px 7px;
 position: absolute;
 z-index: 1908;
 top: 100%;
}

Answer 2

Если вы хотите что-то необычное, вам нужно использовать javascript. Вот что я придумал:

Прежде всего. Ваш HTML неверен, где вы никогда не заканчиваете <td> с </td>, а вместо этого добавляете еще один <td>. Я должен был это исправить, прежде чем перейти к добавлению кода:

https://codepen.io/anon/pen/WBKzZB

.CellWithComment:last-child > .CellComment {
  transform: translateX(-100%);
  background-color: #cc00cc;
}

tr:last-child > .CellWithComment > .CellComment {
  transform: translateY(-100%);
  background-color: #00cccc;
}

tr:last-child > .CellWithComment:last-child  > .CellComment {
  transform: translate(-100%, -100%);
  background-image: linear-gradient(20deg, #00cccc 50%, #cc00cc 51%);
}

Я добавил background-color, чтобы легче было увидеть мою идею за моим решением.