검색 구성 요소

카테고리

툴팁

호버에 표시되는 추가 정보

미니멀리스트 툴팁

블로그/콘텐츠 웹사이트를 위한 미니멀하고 평평한 디자인 툴팁 구성 요소로, 단색 색 구성표와 간단한 레이아웃을 제공합니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

                <div class="relative flex items-center group">
  <button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
    <span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
    <svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
  </div>
</div>

Retro툴팁

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

열다 미리 보기

                <div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md font-mono">Hover Me</button>
  <div class="invisible absolute z-10 top-full left-1/2 transform -translate-x-1/2 mt-2 w-48 p-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 text-sm rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    <p class="font-mono">This is a retro-style tooltip!</p>
  </div>
</div>

Neumorphic Tooltip 컴포넌트

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

열다 미리 보기

                <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>

미니멀리스트 파스텔 툴팁

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

열다 미리 보기

                <div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
  <div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    Tooltip text
  </div>
</div>

Skeuomorphic Tooltip 컴포넌트

스큐어모피즘과 생생한 색상으로 디자인된 반응형 툴팁 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

열다 미리 보기

                <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>

Tooltip 구성 요소

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

열다 미리 보기

                <div class="relative group">
    <!-- Tooltip Trigger -->
    <button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
    
    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
        <div class="p-2">
            <p>This is a tooltip with 3D styling!</p>
        </div>
        <div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
    </div>
</div>

Glassmorphism 단색 단순 툴팁

간단하고 반응이 빠른 다크 모드 호환 툴팁 구성 요소로, Glassmorphism 스타일, 블로그 및 콘텐츠 사이트를 위한 단색 색 구성표가 있습니다.

열다 미리 보기

                <div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</div>

Skeuomorphic Tooltip 컴포넌트

스큐어모픽 스타일과 어스 톤으로 설계된 복잡한 툴팁 구성 요소로, 다크 모드를 지원하는 전자 상거래 애플리케이션에 적합합니다.

열다 미리 보기

                <div class="relative group">
    <img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
    <div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
        <h3 class="text-lg text-earthgreen-200">Product Name</h3>
        <p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
        <div class="flex space-x-2 mt-2">
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
        </div>
    </div>
</div>

Tooltip 구성 요소

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

열다 미리 보기

                <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>

Tooltip 구성 요소

Tooltip Skeuomorphism 스타일, 보색 구성표, 단순 복잡성, 전자 상거래용 구성 요소.

열다 미리 보기

                <div class="relative inline-block">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded shadow-md dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200">Hover over me</button>
  <div class="hidden absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-600">
    Tooltip content
    <div class="tooltip-arrow"></div>
  </div>
</div>

<style>
.tooltip:hover + div {
  display: block;
  opacity: 1;
}

.tooltip-arrow,
.tooltip-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip-arrow {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow {
  border-bottom-color: #4a5568;
}


.tooltip-arrow:after {
  bottom: 1px;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow:after {
  border-bottom-color: #4a5568;
}
</style>