Всплывающая подсказка по стекломорфизму
Компонент всплывающей подсказки, разработанный в стиле 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>Связанные компоненты
Минималистичная подсказка
Простой и минималистичный компонент всплывающих подсказок с поддержкой темной темы и адаптивными эффектами, созданный с использованием Tailwind CSS. Не используется JavaScript, только HTML и CSS.
Скевоморфный компонент всплывающей подсказки
Отзывчивый компонент всплывающей подсказки, разработанный со скевоморфизмом и яркими цветами, подходит для блогов и потребления контента. Он включает в себя поддержку темной темы с использованием Tailwind CSS.
Minimalist_Tooltip
Minimalist/Flat Design Tooltip Component для электронной коммерции с адаптивным дизайном и поддержкой темных тем. Использует комплементарную цветовую схему и имеет умеренную сложность.