Абсолютное положение элемента по центру, пока он умещается на экране

Question

Я создаю систему всплывающих подсказок, используя только CSS, которая отображает всплывающие подсказки с абсолютным центром под элементом, на который вы можете навести курсор, чтобы увидеть всплывающую подсказку. Подсказки должны иметь минимальную ширину. В моем примере ниже вы увидите, что это отлично работает со вторым элементом. В первом случае всплывающая подсказка не помещается на экране и будет обрезана. В этом сценарии (всплывающая подсказка не помещается на экране с левой стороны) ее нужно просто выровнять по левому краю. Если бы он находился в правой части экрана, он должен выровняться по правому краю. Я мог бы раздвигать границы CSS, но может быть решение CSS?

Edit: , как указывали другие, это невозможно сделать только в CSS. JavaScript можно использовать с Element.getBoundingClientRect () . Конечно, есть и готовые решения, такие как Поппер JS.

[data-tooltip] {
  padding: 3px 6px;
  color: white;
  background: red;
  position: relative;
  margin: 3px;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 2em auto;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
  padding: 10px;
  color: #fff;
  background: darkgray;
  min-width: 100px;
  box-shadow: 2px 2px 1px silver;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

<div style="padding: 10px 0px">
  <span data-tooltip="This text (or element) will be cut off somewhat on the left side">Hover me
  </span>
  <span data-tooltip="This tooltip will be completely shown because it is not near any edge">Second one
  </span>
</div>