Всплывающая подсказка по стекломорфизму
Компонент всплывающей подсказки, разработанный в стиле glassmorphism, поддерживающий темную тему и адаптивный дизайн, подходит для интерфейсов социальных сетей.
HTML-код
<div class="relative group inline-block">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
<span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
<span class="font-bold">Your Tooltip Title</span>
<p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
</span>
</div>Связанные компоненты
Скевоморфный компонент всплывающей подсказки
Сложный компонент всплывающих подсказок, выполненный в скевоморфном стиле и земляных тонах, подходит для приложений электронной коммерции с поддержкой темного режима.
Стеклянный морфизм Монохроматический Простая подсказка
Простой, отзывчивый, совместимый с темным режимом компонент всплывающих подсказок со стилем Glassmorphism, монохроматической цветовой схемой для блогов и контентных сайтов.
Компонент всплывающей подсказки - Оттенки серого в стиле ар-деко
Сложный компонент всплывающих подсказок в стиле ар-деко для документации и вики-сайтов с цветовой схемой в оттенках серого, геометрическими узорами и богатым контентом. Полностью адаптивный с поддержкой темного режима.