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

Retro툴팁

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

미리 보기

HTML 코드 

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

관련 구성 요소

브루탈리즘 단색 툴팁

블로그/콘텐츠 사이트를 위해 설계된 복잡하고 잔인한 스타일의 단색 툴팁 구성 요소로, 다양한 대화형 요소와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

Skeuomorphic Tooltip 컴포넌트

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

열다

Skeuomorphic Tooltip 컴포넌트

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

열다