Skeuomorphic Tooltip 컴포넌트
스큐어모피즘과 생생한 색상으로 디자인된 반응형 툴팁 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.
HTML 코드
<div class="relative inline-block">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
Hover me
</button>
<div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-xl opacity-0 transition-opacity duration-300 tooltip">
<div class="flex items-center p-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-sm font-semibold text-gray-800 dark:text-gray-300">John Doe</span>
</div>
<div class="p-2">
<p class="text-xs text-gray-600 dark:text-gray-400">
This is a tooltip message. It provides additional information about the button.
</p>
</div>
</div>
</div>
<style>
/* Tooltip visibility on hover */
.relative:hover .tooltip {
opacity: 1;
}
/* Skeuomorphic style - shadow and border */
.tooltip {
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
}
</style>