CCHub Logo CCHub Tailwind Collection
구성 요소 툴팁 Skeuomorphic Tooltip 컴포넌트

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>

관련 구성 요소

3D_Real_Estate_Tooltip

3D 디자인 요소와 따뜻한 일몰 색 구성표가 있는 적당히 복잡하고 반응이 빠른 툴팁 구성 요소로, 부동산 부동산 목록에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Microinteractions Tooltip 구성 요소

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

열다

Tooltip 구성 요소

반응형이 어두운 테마의 툴팁 구성 요소로, 포트폴리오에 적합한 트라이어딕 색 구성표의 일부입니다. 단순하고 미니멀한 미학을 위해 Tailwind CSS로 제작되었습니다.

열다