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

CSS HTML Вёрстка

5 января 2026 1 ответ

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

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

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

Дополнительно:

Ответы:

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

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

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

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Дмитрий К. Ответ

21 января 2026 в 22:48

Для создания подсказки, которая будет менять своё позиционирование в зависимости от доступного места, можно использовать различные техники CSS, такие как Flexbox или Grid.

Одним из способов реализации подобной функциональности является использование CSS Flexbox. Для этого необходимо создать контейнер, в котором будет находиться сама подсказка, и определить правила для его отображения.

Пример реализации подсказки с помощью Flexbox:

.tooltip-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
 
.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}
 
.tooltip-container:hover .tooltip {
  display: block;
}

.tooltip-container { display: flex; justify-content: flex-start; align-items: center; position: relative; } .tooltip { display: none; position: absolute; top: 100%; left: 0; background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px; border-radius: 5px; } .tooltip-container:hover .tooltip { display: block; }

В данном примере создаётся контейнер `.tooltip-container`, внутри которого располагается элемент с классом `.tooltip`, который изначально скрыт. При наведении курсора на контейнер, подсказка отображается.

Для того чтобы подсказка меняла своё позиционирование при нехватке места, можно использовать JavaScript для определения доступного места на экране и изменения позиции подсказки в зависимости от этого.

Пример использования JavaScript для изменения позиции подсказки:

var tooltip = document.querySelector('.tooltip');
var container = document.querySelector('.tooltip-container');
 
container.addEventListener('mouseover', function() {
  var rect = container.getBoundingClientRect();
  var tooltipRect = tooltip.getBoundingClientRect();
 
  if (window.innerWidth &lt; tooltipRect.width + rect.left) {
    tooltip.style.left = window.innerWidth - tooltipRect.width + &#039;px&#039;;
  } else {
    tooltip.style.left = rect.left + &#039;px&#039;;
  }
 
  if (window.innerHeight &lt; tooltipRect.height + rect.bottom) {
    tooltip.style.top = window.innerHeight - tooltipRect.height + &#039;px&#039;;
  } else {
    tooltip.style.top = rect.bottom + &#039;px&#039;;
  }
 
  tooltip.style.display = &#039;block&#039;;
});
 
container.addEventListener(&#039;mouseout&#039;, function() {
  tooltip.style.display = &#039;none&#039;;
});

Этот код позволит подсказке автоматически менять своё позиционирование в зависимости от доступного места на экране. При наведении на контейнер, подсказка будет отображаться в нужной позиции, а при уходе курсора с контейнера, она скроется.

Таким образом, используя комбинацию CSS и JavaScript, можно создать подсказку, которая будет менять своё позиционирование при нехватке места.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов

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

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно