コンポーネントツールチップ Glassmorphism、単色、シンプル、ツールチップ

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

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

プレビュー

HTMLコード

<div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</div>

関連コンポーネント

Memphis_Real_Estate_Tooltip

不動産アプリケーション向けのシンプルで応答性の高いツールチップコンポーネントで、モノクロのベースと鮮やかなアクセントカラーを備えたメンフィスデザインにインスパイアされた美学が特徴です。ダークモードのサポートが含まれています。

開ける

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

eコマース用のミニマリストパステルツールチップコンポーネントで、レスポンシブデザインとダークモードがサポートされています。

開ける

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

スキューモーフィックスタイルとアーストーンで設計された複雑なツールチップコンポーネントで、ダークモードをサポートする e コマースアプリケーションに適しています。

開ける