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

Tooltip 구성 요소

사용자 참여를 위한 마이크로 인터랙션이 있는 반응형 툴팁 구성 요소로, 어두운 테마와 매력적인 애니메이션을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="relative group">
    <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
        Hover me
    </button>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                <span class="font-semibold">John Doe</span>
            </div>
            <div>
                <p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
            </div>
            <img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
        </div>
    </div>
</div>
<!-- Dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1f2937;
        }
        .border-gray-700 {
            border-color: #374151;
        }
    }
</style>

관련 구성 요소

Monospace_Developer_Tooltip_Component_Healthcare

따뜻한 일몰 톤의 모노스페이스에서 영감을 받은 간단한 툴팁 구성 요소로, 의료 응용 프로그램을 위해 설계되었습니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다

Brutalism Tooltip 구성 요소

소셜 미디어를 위한 Brutalism 스타일의 툴팁 구성 요소로, 회색조 색 구성표와 복잡한 대화형 요소를 특징으로 합니다. 반응형이며 JavaScript 없이 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

Tooltip 구성 요소

블로그 콘텐츠 소비를 위해 설계된 간단한 반응형 툴팁 구성 요소로, 회색조 색 구성표가 있는 3D 디자인과 Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.

열다