CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ ミニマリストツールチップ

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

ダーク テーマのサポートとレスポンシブ エフェクトを備えたシンプルでミニマリストのツールチップ コンポーネントで、Tailwind CSS を使用して構築されています。JavaScriptは使用せず、HTMLとCSSのみを使用しています。

プレビュー

HTMLコード 

<div class="group relative inline-block">
  <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
  <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
    Tooltip text
    <svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
  </div>
</div>

関連コンポーネント

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

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

開ける

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

Tailwind CSS で構築された、微妙なマイクロインタラクション アニメーション、レスポンシブ デザイン、ダーク テーマのサポートを備えた、シンプルでありながら魅力的なツールチップ コンポーネント。JavaScriptは必要ありません。

開ける

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

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

開ける