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

Neumorphic Tooltip 컴포넌트

비즈니스 웹 사이트에 적합한 정교한 Neumorphism 스타일의 툴팁 구성 요소로, 생생한 색상을 사용하고 다크 모드를 지원하도록 설계되었습니다.

미리 보기

HTML 코드 

<div class="relative group flex items-center">
    <!-- Tooltip Trigger -->
    <button class="bg-purple-600 text-white rounded-full p-2 shadow-lg focus:outline-none">
        Hover me
    </button>

    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-10">
        <div class="p-3">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <span class="font-semibold">John Doe</span>
            </div>
            <p class="mt-2">This is a tooltip description to provide additional information.</p>
        </div>
        <div class="rounded-lg bg-purple-600 p-2 text-white text-center font-bold transition-transform transform hover:scale-105">Learn More</div>
    </div>
</div>

관련 구성 요소

Tooltip 구성 요소

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

열다

Tooltip 구성 요소

보색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖춘 뉴모픽 툴팁 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.

열다

미니멀리스트 파스텔 툴팁

비즈니스 및 기업 웹 사이트용으로 설계된 미니멀하고 평평한 툴팁 구성 요소로, 파스텔 색상, 반응형 디자인 및 Tailwind CSS를 사용하는 다크 모드를 지원합니다.

열다