Всплывающее окно постоянно центрируется под элементом? ⇐ CSS

[Anonymous]

Я пишу браузерную игру, в которой есть множество кнопок. Чтобы объяснить правила, я использую всплывающие окна, которые появляются при наведении курсора мыши на кнопку. Эти всплывающие окна имеют небольшой треугольник, который указывает на кнопку, с которой они связаны, как псевдоэлемент.
В примере ниже я показываю всплывающее окно на двух разных кнопках. . Хотя всплывающее окно в основном сосредоточено вокруг кнопки «Очистить», оно не центрировано для кнопки «Подсказка».

Код: Выделить всё

button {
background-color: lightblue;
border: none;
box-shadow: 5px 5px 0 var(--stripeColorDark);
padding: 10px;
color: var(--textColor);
margin: 5px;
border-radius: 10px;
font-family: Arial, sans-serif;
cursor: pointer;
}

.hint-button {
width: 300px;
}

.clear-button {
width: 100px;
}

/* Popup container */
.popup-container {
position: relative;
cursor: pointer;
width: 100px;
}

/* The actual popup (appears on top) */
.popup-text {
position: absolute;

padding: 10px;
top: 105%;

height: 50px;
width: 100px;

border-radius: 10px;
background-color: #303030;

color: white;
font-family: Arial, sans-serif;
text-align: center;

opacity: 0;
visibility: hidden;
transition: all 0.5s ease-in-out;

z-index: 1;
}

.popup-container:hover .popup-text  {
opacity: 1;
visibility: visible;
}

.popup-text::after {
content: "";
position: absolute;

margin-left: 5px;
margin-bottom: -10px;
bottom: 100%;
left: 50%;

border: 5px solid #303030;
border-color: transparent transparent #303030 #303030;

transform-origin: 0 0;
transform: rotate(135deg);
}

Код: Выделить всё

Hint
Reveal a letter of your choice.


Clear
Clear the board.

Есть ли способ последовательно центрировать всплывающее окно и треугольник под кнопкой, независимо от ее размера?

Подробнее здесь: https://stackoverflow.com/questions/792 ... an-element