Glassmorphism 툴팁
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>관련 구성 요소
Microinteractions Tooltip 구성 요소
Tailwind CSS로 구축된 미묘한 마이크로 인터랙션 애니메이션, 반응형 디자인 및 어두운 테마 지원을 제공하는 간단하면서도 매력적인 툴팁 구성 요소입니다. JavaScript가 필요하지 않습니다.