Как сверстать подсказку чтобы менялось позиционирование при нехватке места?

Question

[Сергей К]

Как сверстать подсказку чтобы менялось позиционирование при нехватке места?

Соответственно чтобы когда справа не хватает места подсказка улетала вниз? Конечно хотелось бы без js

https://codepen.io/bxccjdml-the-animator/pen/OJaqoJE

Answer 1

[ARCHXTEKK]

При помощи медиа запросов

.hint {
  transition: transform .5s;
}
@media screen and (max-width: 300px) {
  .hint {
    transform: translateY(80vh);
  }
}

Comments

[Сергей К]

а как css узнает что справа нет места если неизвестно на каком разрешении оно понадобится?

[leeroyjenkins176]

Сергей К, никак. Не выдумывайте костыли, а используйте решения, созданы специально для таких задач tippyjs