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

Tooltip 구성 요소

다크 모드 지원, 반응형 디자인 및 Tailwind CSS를 사용하는 포트폴리오를 보여주는 Neumorphism 스타일의 툴팁 구성 요소입니다.

미리 보기

HTML 코드 

<div class="relative group">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
        </div>
    </div>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
            <p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
            <img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
        </div>
        <div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
    </div>
</div>

관련 구성 요소

Retro툴팁

레트로/빈티지 스타일과 그레이스케일 색 구성표를 갖춘 간단하고 반응이 빠른 툴팁 구성 요소로 비즈니스 웹사이트에 적합합니다. 어두운 테마를 지원합니다.

열다

미니멀리스트 툴팁

Tailwind CSS를 사용하여 구축된 어두운 테마 지원 및 반응형 효과가 있는 간단하고 미니멀한 툴팁 구성 요소입니다. JavaScript는 사용되지 않고 HTML과 CSS 만 사용됩니다.

열다

Neumorphic Tooltip 컴포넌트

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

열다