@Valsin

Как сверстать информационное окошко?

5d80f455bbe16181115289.jpeg

Добрый вечер, как сверстать подобное, чтобы появлялось при наведении и у курсора?
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Лучше не страдать ерундой, а сделать на том же TippyJS:
https://atomiks.github.io/tippyjs/

Сделать свою тему для этого плагина тоже не составит труда.

Таким образом вы обойдёте кучу узких моментов с HTML-структурой, позиционированием, триггерами и автоматизацией подобных тултипов. Ибо скрипт сам генерирует DOM (можно настроить как на уровень родителя, так и на другого предка или тег body) и позиционирует тултип с учётом его позиции в окне браузера.

В ином случае, блок на абсолютном позиционировании относительно красного кружка со знаком вопроса. Но это не будет учитывать моменты, когда там что-то будет не вмешаться в экран, возможный overflow и т. п.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HistoryART
@HistoryART
Целеустремлённый
Добавь отображение окошка при наведении
#your_block:hover
Размести его как тебе нужно с помощью margin

Html
<div id="your_block">
  <div>View?</div>
</div>


Css
#your_block div {
  display: none;
}
#your_block:hover div {
 display: block;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
17 нояб. 2019, в 07:16
500 руб./за проект
17 нояб. 2019, в 06:44
100000 руб./за проект