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

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

応答性の高いダークをテーマにしたツールチップコンポーネントで、Triadic カラースキームの一部で、ポートフォリオに適しています。Tailwind CSSで構築され、シンプルでミニマルな美学を実現しています。

プレビュー

HTMLコード 

<div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

関連コンポーネント

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

ゲームインターフェイス用のミニマリストでフラットなデザインのツールチップコンポーネントで、黒、白、明るいアクセントカラーが特徴で、複雑なインタラクティブ要素とダークモードのサポートを含む完全な応答性を備えています。

開ける

Bauhaus_Autumn_Tooltip_Component

バウハウスにインスパイアされた、秋の配色で、ファッションや美容ブランド向けにデザインされたツールチップコンポーネントです。機能的な幾何学的デザイン、応答性、およびダークモードのサポートを特長としています。

開ける

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

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

開ける