Как сделать выравнивание тултипа по вертикали по центру?

Question

[Кирилл Горлов]

Проблема из серии "просто, но догадаться не получается".
Имеется DIV с двумя элементами: input и tooltip(span)

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

Собственно как сделать так чтобы тултип с ошибкой всплывал сбоку (слева/справа) и вертикально по центру?
Тултип со стрелочкой. Стрелочку проблем не возникло выровнять, так как позиционирование абсолютное, сверху 50% минус сама высота стрелочки 14px. У тултипа же высота динамическая.

__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

[Ankhena]

Любой из способов по запросу "CSS вертикальное выравнивание"
например,

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

Выложили бы свои стили, помощи могло бы быть больше.

Comments

[Кирилл Горлов]

странно но не помогло

[Кирилл Горлов]

https://jsfiddle.net/fogd1rdw/36/

[Ankhena]

Кирилл Горлов:
Прикольно.
Вместо top 50% ставите 0, а вместо transform ставите transition.

странно но не помогло

Действительно, странно..

Вот
https://jsfiddle.net/qt1fb854/

[Кирилл Горлов]

Ankhena W: transform: translateY(-50%);

вот так работает ))))

Answer 2

[tyzberd]

используйте что то готовое, где яваскриптом выставляет в нужное положение.
например с bootstrap https://v4-alpha.getbootstrap.com/components/popovers/

Comments

[Кирилл Горлов]

Без бутстрапа и JS =) На чистом HTML CSS(LESS)