CCHub Logo CCHub Tailwind Collection
구성 요소 툴팁 Microinteractions Tooltip 구성 요소

Microinteractions Tooltip 구성 요소

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

미리 보기

HTML 코드 

<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200">Hover Me</button>
    <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Hello! I'm a Tooltip
    </div>
  </div>
</div>

관련 구성 요소

Memphis_Real_Estate_Tooltip

부동산 응용 프로그램을 위한 간단하고 반응이 빠른 툴팁 구성 요소로, Memphis Design에서 영감을 받은 미학을 단색 베이스와 생생한 액센트 색상으로 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Retro Tooltip 컴포넌트

레트로/빈티지 테마의 툴팁 구성 요소로, 반응형 효과와 다크 모드를 지원합니다.

열다

Tooltip 구성 요소

생생한 색상, 마이크로 인터랙션 및 다크 모드 지원을 제공하는 반응형 툴팁 구성 요소로, 산업 및 제조 응용 분야에 적합합니다. 호버/포커스에 대한 정보를 표시합니다.

열다