툴팁

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

미리 보기

HTML 코드

<div class="relative flex items-center group">
  <span clas="underline">Hover Over Me</span>
  <div class="absolute bottom-full mb-2 hidden group-hover:block px-3 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out transform bg-gray-800 rounded-md shadow-lg dark:bg-gray-700 -translate-x-1/2 left-1/2
   before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-x-transparent before:border-b-transparent before:border-t-gray-800 dark:before:border-t-gray-700">
    Tooltip content
  </div>
</div>

관련 구성 요소

미니멀리스트 파스텔 툴팁

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

열다

Glassmorphism 단색 단순 툴팁

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

열다

Microinteractions Tooltip 구성 요소

Tailwind CSS로 구축된 미묘한 마이크로 인터랙션 애니메이션, 반응형 디자인 및 어두운 테마 지원을 제공하는 간단하면서도 매력적인 툴팁 구성 요소입니다. JavaScript가 필요하지 않습니다.

열다