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>관련 구성 요소
Minimalist_Tooltip
미니멀리스트/플랫 디자인(Minimalist/Flat Design) 툴팁 전자 상거래를 위한 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다. 보색 구성표를 사용하며 중간 정도의 복잡성을 가지고 있습니다.
Memphis_Real_Estate_Tooltip
부동산 응용 프로그램을 위한 간단하고 반응이 빠른 툴팁 구성 요소로, Memphis Design에서 영감을 받은 미학을 단색 베이스와 생생한 액센트 색상으로 특징으로 합니다. 다크 모드 지원이 포함됩니다.