Glassmorphism 단색 단순 툴팁

간단하고 반응이 빠른 다크 모드 호환 툴팁 구성 요소로, Glassmorphism 스타일, 블로그 및 콘텐츠 사이트를 위한 단색 색 구성표가 있습니다.

미리 보기

HTML 코드

<div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</div>

관련 구성 요소

Tooltip 구성 요소

마이크로 인터랙션, 트라이어드 색 구성표로 설계된 반응형 툴팁 구성 요소이며 전문 비즈니스/기업 웹 사이트를 위한 다크 모드를 지원합니다. 여기에는 매력적인 애니메이션, 대화형 요소가 있는 풍부한 인터페이스가 포함되며 스타일링에 Tailwind CSS를 사용합니다.

열다

미니멀리스트 파스텔 툴팁

비즈니스 및 기업 웹 사이트용으로 설계된 미니멀하고 평평한 툴팁 구성 요소로, 파스텔 색상, 반응형 디자인 및 Tailwind CSS를 사용하는 다크 모드를 지원합니다.

열다

Skeuomorphic Tooltip 컴포넌트

스큐어모픽 스타일과 어스 톤으로 설계된 복잡한 툴팁 구성 요소로, 다크 모드를 지원하는 전자 상거래 애플리케이션에 적합합니다.

열다