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

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

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

プレビュー

HTMLコード 

<div class="relative inline-block">
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
        Hover me
    </button>
    <div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-xl opacity-0 transition-opacity duration-300 tooltip">
        <div class="flex items-center p-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm font-semibold text-gray-800 dark:text-gray-300">John Doe</span>
        </div>
        <div class="p-2">
            <p class="text-xs text-gray-600 dark:text-gray-400">
                This is a tooltip message. It provides additional information about the button.
            </p>
        </div>
    </div>
</div>

<style>
    /* Tooltip visibility on hover */
    .relative:hover .tooltip {
        opacity: 1;
    }

    /* Skeuomorphic style - shadow and border */
    .tooltip {
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
        border-radius: 0.5rem;
    }
</style>

関連コンポーネント

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

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

開ける

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

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

開ける

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

e コマース用の単色配色で、ダークモードをサポートするレスポンシブマテリアルデザインツールチップコンポーネントです。JavaScript、HTML、Tailwind CSSのみはありません。

開ける