Minimalist_Tooltip
미니멀리스트/플랫 디자인(Minimalist/Flat Design) 툴팁 전자 상거래를 위한 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다. 보색 구성표를 사용하며 중간 정도의 복잡성을 가지고 있습니다.
HTML 코드
<div class="relative group">
<button class="text-blue-700 hover:text-blue-800 dark:text-red-400 dark:hover:text-red-500 font-bold py-2 px-4 rounded">Hover Me</button>
<div class="absolute bottom-full mb-2 hidden group-hover:block w-48 bg-blue-100 text-blue-800 text-sm rounded py-1 px-2 dark:bg-red-900 dark:text-red-100">
Product information or details here.
</div>
</div>관련 구성 요소
스큐어모픽 대시보드 툴팁
대시보드를 위한 복잡한 스큐어모픽 툴팁 구성 요소로, 트라이어드 색 구성표와 다크 모드를 지원하는 반응형 디자인을 특징으로 하며, JavaScript 없이 Tailwind CSS로 빌드되었습니다.
Bauhaus_Autumn_Tooltip_Component
Bauhaus에서 영감을 받은 툴팁 구성 요소로, 패션 및 뷰티 브랜드를 위해 디자인된 가을 색 구성표가 있습니다. 기능적인 기하학적 디자인, 반응성 및 다크 모드 지원이 특징입니다.