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

미니멀리스트 툴팁

블로그/콘텐츠 웹사이트를 위한 미니멀하고 평평한 디자인 툴팁 구성 요소로, 단색 색 구성표와 간단한 레이아웃을 제공합니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="relative flex items-center group">
  <button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
    <span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
    <svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
  </div>
</div>

관련 구성 요소

툴팁

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

열다

Tooltip 구성 요소

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

열다

Brutalism Tooltip 구성 요소

소셜 미디어를 위한 Brutalism 스타일의 툴팁 구성 요소로, 회색조 색 구성표와 복잡한 대화형 요소를 특징으로 합니다. 반응형이며 JavaScript 없이 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다