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

Tooltip 구성 요소

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

미리 보기

HTML 코드 

<div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

관련 구성 요소

Glassmorphism 단색 단순 툴팁

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

열다

Minimalist_Tooltip

미니멀리스트/플랫 디자인(Minimalist/Flat Design) 툴팁 전자 상거래를 위한 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다. 보색 구성표를 사용하며 중간 정도의 복잡성을 가지고 있습니다.

열다

Skeuomorphic Tooltip 컴포넌트

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

열다