Всплывающая подсказка — это элемент графического пользовательского интерфейса (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-weight из 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.

Не стесняйтесь поделиться со мной, если вы смогли пройти обучение на своей стороне.

Если у вас есть какие-либо опасения или предложения, не стесняйтесь поднимать их! 😊

До встречи! 👋