Glassmorphismツールチップ

glassmorphismスタイルで設計されたツールチップコンポーネントで、ダークテーマとレスポンシブデザインをサポートし、ソーシャルメディアインターフェイスに適しています。

プレビュー

HTMLコード

<div class="relative group inline-block">
    <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
    <span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
        <span class="font-bold">Your Tooltip Title</span>
        <p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
    </span>
</div>

関連コンポーネント

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

鮮やかな色、マイクロインタラクション、ダークモードのサポートを備えたレスポンシブツールチップコンポーネントで、産業用および製造用アプリケーションに適しています。ホバー/フォーカスに関する情報を表示します。

開ける

Monospace_Developer_Tooltip_Component_Healthcare

温かみのある夕焼けの色調のシンプルなモノスペースにインスパイアされたツールチップコンポーネントで、ヘルスケアアプリケーション向けに設計されています。レスポンシブデザインとダークモードのサポートが特徴です。

開ける

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

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

開ける