구성 요소 툴팁 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>

Microinteractions Tooltip 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Tooltip 구성 요소

Tooltip 구성 요소

Minimalist_Tooltip