Компонент «Нейроморфная подсказка»
Сложный компонент всплывающей подсказки в стиле Neumorphism, подходящий для бизнес-сайтов, использующий яркие цвета и предназначенный для поддержки темного режима.
HTML-код
<div class="relative group flex items-center">
<!-- Tooltip Trigger -->
<button class="bg-purple-600 text-white rounded-full p-2 shadow-lg focus:outline-none">
Hover me
</button>
<!-- Tooltip -->
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-10">
<div class="p-3">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<span class="font-semibold">John Doe</span>
</div>
<p class="mt-2">This is a tooltip description to provide additional information.</p>
</div>
<div class="rounded-lg bg-purple-600 p-2 text-white text-center font-bold transition-transform transform hover:scale-105">Learn More</div>
</div>
</div>
Связанные компоненты
Компонент всплывающей подсказки
Минималистичный, плоский компонент всплывающих подсказок для игровых интерфейсов, включающий черный, белый и яркий акцентный цвет, со сложными интерактивными элементами и полной отзывчивостью, включая поддержку темного режима.
Bauhaus_Autumn_Tooltip_Component
Компонент всплывающей подсказки в стиле Баухаус с осенней цветовой гаммой, разработанный для модных и косметических брендов. Отличается функциональным геометрическим дизайном, отзывчивостью и поддержкой темных режимов.
Monospace_Developer_Tooltip_Component_Healthcare
Простой, моноширинный компонент всплывающих подсказок с теплыми закатными тонами, предназначенный для применения в здравоохранении. Особенности адаптивного дизайна и поддержка темного режима.