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

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

プレビュー

HTMLコード

<div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
  <div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    Tooltip text
  </div>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

スキューモーフィックツールチップコンポーネント

スキューモーフィズムと鮮やかな色で設計された応答性の高いツールチップコンポーネントで、ブログやコンテンツの消費に適しています。これには、Tailwind CSSを使用したダークテーマのサポートが含まれています。

開ける