Как менять позицию title чтобы всегда виден был?

.container {
  padding: 60px 10px;
  display: flex;
}
.block {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.block > div {
  border: 1px solid #000;
  display: inline-block;
}

[data-title] {
    position: relative;
}
[data-title]:hover:after {
    opacity: 1;
    visibility: visible;
    transition: .1s;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.5em;
    z-index: 99999;
    white-space: nowrap;
    background: #fff;
    padding: 2px 6px 3px;
    border: 1px solid #555;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
}

<div class="container">
  <div class="block">
    <div data-title="Left block">Left</div>
    <div data-title="Center block">Center</div>
    <div data-title="Right block">Right</div>
  </div>
</div>