[data-title] {
  position: relative;
}

[data-title]:hover::after,
[data-title]:focus::after {
  content: attr(data-title);
  position: absolute;
  width: fit-content;
  text-wrap: nowrap;
  border: 1px var(--default-border-color) solid;
  border-radius: 10px;
  background-color: var(--default-background-color);
  padding: 12px;
  color: var(--default-text-color);
  font-size: 14px;
  z-index: 1;
  opacity: 0.8;
  left: calc(100% + 5px);
}

[data-title][left]:hover::after,
[data-title][left]:focus::after {
  right: calc(100% + 5px);
  left: unset;
}