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

미니멀리스트 파스텔 툴팁

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

미리 보기

HTML 코드 

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

관련 구성 요소

툴팁

3D Design, Earth tones, Simple complexity, Dashboard 용도의 툴팁 컴포넌트. 어두운 테마 지원으로 반응형입니다.

열다

Tooltip 구성 요소

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

열다

Tooltip 구성 요소

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

열다