CCHub Logo CCHub Tailwind Collection
구성 요소 툴팁 미니멀리스트 툴팁

미니멀리스트 툴팁

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

미리 보기

HTML 코드 

<div class="group relative inline-block">
  <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
  <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
    Tooltip text
    <svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
  </div>
</div>

관련 구성 요소

미니멀리스트 파스텔 툴팁

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

열다

Tooltip 구성 요소

게임 인터페이스를 위한 미니멀하고 평면적인 디자인의 툴팁 구성 요소로, 블랙, 화이트 및 밝은 액센트 컬러를 특징으로 하며, 복잡한 인터랙티브 요소와 다크 모드 지원을 포함한 완전한 응답성을 갖추고 있습니다.

열다

Skeuomorphic Tooltip 컴포넌트

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

열다