Tooltip 구성 요소
마이크로 인터랙션, 트라이어드 색 구성표로 설계된 반응형 툴팁 구성 요소이며 전문 비즈니스/기업 웹 사이트를 위한 다크 모드를 지원합니다. 여기에는 매력적인 애니메이션, 대화형 요소가 있는 풍부한 인터페이스가 포함되며 스타일링에 Tailwind CSS를 사용합니다.
HTML 코드
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
Hover over me
</button>
</div>
<div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<div class="p-3">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
<div>
<p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
</div>
</div>
<div class="mt-2 text-gray-600 dark:text-gray-300">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
</div>
<div class="mt-2 flex justify-end">
<button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
.transition-opacity {
transition: opacity 0.5s ease-in-out;
}
}
</style>