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

Tooltip 구성 요소

생생한 색상, 마이크로 인터랙션 및 다크 모드 지원을 제공하는 반응형 툴팁 구성 요소로, 산업 및 제조 응용 분야에 적합합니다. 호버/포커스에 대한 정보를 표시합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <!-- Trigger Element -->
    <button
      class="peer px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg 
             focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 
             transition-all duration-300 ease-in-out transform hover:scale-105 
             dark:bg-blue-800 dark:hover:bg-blue-700"
      aria-describedby="tooltip-info"
    >
      <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.707 6.364l-.707-.707M12 21v-1m-4.636-1.636l-.707.707M3 12H2m1.636-4.636l.707-.707M10 21h4a2 2 0 002-2V9a2 2 0 00-2-2h-4a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      View Machine Status
    </button>

    <!-- Tooltip Content -->
    <div
      id="tooltip-info"
      role="tooltip"
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 
             bg-gradient-to-br from-green-500 to-teal-600 text-white text-sm font-medium rounded-lg shadow-xl 
             whitespace-nowrap transition-all duration-300 ease-out 
             opacity-0 invisible 
             group-hover:opacity-100 group-hover:visible group-hover:-translate-y-2 
             group-focus-within:opacity-100 group-focus-within:visible group-focus-within:-translate-y-2 
             dark:from-green-700 dark:to-teal-800 
             sm:text-base"
    >
      
      <div class="relative flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.756a4.898 4.898 0 011.041 3.565A6.003 6.003 0 0124 12c0 2.21-1.229 4.143-3.053 5.176l-1.921 1.921A8.96 8.96 0 0112 24c-2.868 0-5.514-.766-7.85-2.096l-1.921-1.921A6.003 6.003 0 010 12c0-2.21 1.229-4.143 3.053-5.176l1.921-1.921A8.96 8.96 0 0112 0c2.868 0 5.514.766 7.85 2.096l1.921 1.921A6.003 6.003 0 0124 12z"></path></svg>
        Machine #1789: Operating Normally

        <!-- Tail/Arrow for the Tooltip -->
        <svg class="absolute top-full left-1/2 -ml-2 w-4 h-4 text-green-600 dark:text-green-800 rotate-180 -mt-1" fill="currentColor" viewBox="0 0 24 24"><path d="M24 22h-24l12-12z"/></svg>
      </div>

    </div>
  </div>

</div>

관련 구성 요소

Skeuomorphic Tooltip 컴포넌트

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

열다

Minimalist_Tooltip

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

열다

Bauhaus_Autumn_Tooltip_Component

Bauhaus에서 영감을 받은 툴팁 구성 요소로, 패션 및 뷰티 브랜드를 위해 디자인된 가을 색 구성표가 있습니다. 기능적인 기하학적 디자인, 반응성 및 다크 모드 지원이 특징입니다.

열다