How to make the tooltip vertically centered?

Question

css

The problem is from the series "simple, but it's impossible to guess."
I have a DIV with two elements: input and tooltip (span)

<div class="profile__data-input">
    <input type="text" name="fieldName" value="[email protected]">
    <span class="profile__data-validator-msg">
        Ошибка валидации в несколько строчек и еще по всякому
    </span>
</div>

Actually, how to make the tooltip pop up with an error on the side (left / right) and vertically in the center?
Tooltip with an arrow. There were no problems to align the arrow, since the positioning is absolute, 50% on top minus the height of the arrow itself 14px. The tooltip has a dynamic height.

__data-validator-msg {
    max-width: 250px;
    min-width: 150px;
    background-color: $error-bg;
    padding: 10px;
    font-size: 12px;
    color: $error-color;
    position: absolute;
    top: 0;
    -webkit-transition: translateY (-50%);
    -moz-transition: translateY (-50%);
    -ms-transition: translateY (-50%);
    -o-transition: translateY (-50%);
    transition: translateY (-50%);
    left: 280px;
    z-index: 100;
    &:before {
      content: "";
      position: absolute;
      border: 14px solid transparent;
      border-right: 7px solid $error-bg;
      left: -21px;
      top: calc(50% - 14px);
    }
  }

Answer 1

Any of the ways on the request "CSS vertical alignment"
for example,

top: 50%;
transform: translateY(-50%);

If you would post your styles, there could be more help.

Answer 2

use something ready-made, where javascript puts it in the right position.
for example with bootstrap https://v4-alpha.getbootstrap.com/components/popovers/