CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ ツールチップコンポーネント

ツールチップコンポーネント

マイクロインタラクション、トライアドカラースキームで設計されたレスポンシブツールチップコンポーネントで、プロフェッショナルなビジネス/企業Webサイトのダークモードをサポートします。これには、魅力的なアニメーション、インタラクティブな要素を備えた豊富なインターフェイスが含まれ、スタイリングにはTailwind CSSを使用します。

プレビュー

HTMLコード 

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
      Hover over me
    </button>
  </div>

  <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
    <div class="p-3">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
        <div>
          <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
        </div>
      </div>
      <div class="mt-2 text-gray-600 dark:text-gray-300">
        <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
      </div>
      <div class="mt-2 flex justify-end">
        <button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
      </div>
    </div>
  </div>
</div>

<style>
@media (prefers-reduced-motion: no-preference) {
  .transition-opacity {
    transition: opacity 0.5s ease-in-out;
  }
}
</style>

関連コンポーネント

Glassmorphism、単色、シンプル、ツールチップ

シンプルでレスポンシブなダークモード互換のツールチップコンポーネントで、Glassmorphismスタイル、ブログおよびコンテンツサイト用の単色配色を備えています。

開ける

ミニマリストパステルツールチップ

パステルカラー、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートを備えた、ビジネスおよび企業のWebサイト向けに設計された最小でフラットなツールチップコンポーネント。

開ける

ツールチップコンポーネント

ブログコンテンツの使用用に設計されたシンプルなレスポンシブツールチップコンポーネントで、グレースケールの配色とTailwind CSSを使用したダークモードサポートを備えた3Dデザインが特徴です。

開ける