Всплывающая подсказка — это элемент графического пользовательского интерфейса (GUI), используемый вместе с курсором или указателем мыши для отображения информации об элементе без необходимости нажимать на него.
Будучи одним из самых популярных экранных элементов адаптации и взаимодействия с пользователем, веб-сайты и приложения могут содержать простые всплывающие подсказки, серии всплывающих подсказок, отдельные всплывающие подсказки или всплывающие подсказки в качестве интерактивных элементов пути пользователя.
Всплывающие подсказки имеют широкий спектр вариантов использования, и их можно настроить для каждого варианта использования в зависимости от их назначения.
В этом учебном разделе мы создадим всплывающую подсказку профиля, чтобы при наведении она давала вам более подробную информацию о наведенном изображении профиля.
Этот тип всплывающей подсказки можно увидеть в Твиттере, где, когда пользователь наводит курсор на изображение профиля другого пользователя, отображается всплывающая подсказка с более подробной информацией о пользователе, чье изображение профиля наведено.
Понимание задачи
Всплывающая подсказка — не сложная задача, мы будем выполнять эту работу в 2 отдельных частях. Профиль пользователя и всплывающая подсказка профиля.
Структура кода
Наша структура кода проста и понятна.
<body> <div> <!-- Profile Tooltip --> <div></div> <!-- User Profile Picture--> <div></div> </div> </body>
В основном у нас есть изображение профиля пользователя, из которого будет отображаться всплывающая подсказка, и у нас есть сам код всплывающей подсказки.
Изображение профиля пользователя
<!-- Profile Tooltip --> <div id="profile" class="cursor-pointer active:scale-95"> <div class="h-16 w-16 rounded-full overflow-hidden p-1.5 bg-slate-900"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4JL5abHt--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1035172/ddd0c7d5-5a6b-4191-b822-02745bea888d.png" alt="" class="rounded-full aspect-square object-center object-cover"> </div> </div>
У нас есть контейнер с id="profile", который scale-95
активен.
Мы дали контейнеру изображения width
и height
из w-16
и h-16
соответственно, border-radius
из rounded-full
. Чтобы сделать изображение отзывчивым, мы присвоили ему aspect-square object-center
и object-cover
.
Это все для этой части
Подсказка профиля
<!-- User Profile Picture--> <div id="tooltip" class="hidden absolute -top-[11.5rem] bg-[#1d1a36] rounded-lg"> <div class="max-w-[20rem] flex gap-2 px-2 py-7 text-sm relative before:absolute before:content-[''] before:w-5 before:h-5 before:rotate-45 before:bg-[#1d1a36] before:-bottom-2.5 before:left-[45%]"> <div class="h-14 w-14 rounded-full overflow-hidden"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4JL5abHt--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1035172/ddd0c7d5-5a6b-4191-b822-02745bea888d.png" alt="" class="aspect-square object-center object-cover"> </div> <div> <div class="mb-5"> <h2 class="font-semibold text-[14px]">Mbianou Bradon</h2> <p class="mt-1">UX Designer <span class="text-[#6952f9]">@iknite</span></p> </div> <div id="out" class="cursor-pointer text-center w-fit px-3 py-3 bg-[#6952f9] text-xs font-semibold border border-[#6952f9] hover:bg-white hover:text-[#6952f9] active:scale-95 rounded-md"><h2>Message</h2></div> </div> </div> </div>
Основной контейнер имеет id="tooltip" для удобства обращения на уровне файла javascript.
Контейнер позиционируется абсолютно и в том месте, где он должен быть с использованием -top-[11.5rem]
Содержимое этого контейнера — это в основном изображение профиля, имя пользователя и сведения о том, что он делает.
Здесь применяются базовые стили, такие как padding-inline
из px
, padding-block
из py
, border-radius
из rounded-full
и font-weigh
t из font-semibold
.
Дополнительный стиль
Мы также придали дополнительный стиль основному контейнеру, в котором все хранится вместе, и телу страницы.
<body class="bg-gradient-to-r from-[#8875d5] to-[#423b87] flex items-center justify-center min-h-screen"> <div class="w-full max-w-lg relative mt-10 flex justify-center"> <!-- Profile Tooltip --> <div></div> <!-- User Profile Picture--> <div></div> </div> </body>
И это должно быть все для раздела HTML и TailwindCSS.
Теперь давайте перейдем к нашему файлу JavaScript.
JavaScript
const tooltip = document.getElementById('tooltip') const profile = document.getElementById('profile') profile.addEventListener('mouseover', () => { tooltip.classList.toggle('hidden') }) profile.addEventListener('mouseout', () => { tooltip.classList.toggle('hidden') })
Ага! Это все о коде JavScript. При перемещении свойство TailwindCSS hidden переключается, чтобы отобразить всплывающую подсказку, а при отсутствии мыши — обратно, чтобы скрыть всплывающую подсказку.
На этой ноте мы завершаем этот раздел.
Заключение
Мы только что создали красивый и простой компонент всплывающей подсказки.
Многим работодателям потребуется добавить такие компоненты на свои веб-сайты, и вы наверняка знаете, как просто создать их прямо из вашего HTML-документа.
Вы можете просмотреть Live Preview на Codepen или найти код на GitHub.
Не стесняйтесь поделиться со мной, если вы смогли пройти обучение на своей стороне.
Если у вас есть какие-либо опасения или предложения, не стесняйтесь поднимать их! 😊
До встречи! 👋