CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ Neumorphic Tooltip コンポーネント

Neumorphic Tooltip コンポーネント

ビジネスWebサイトに適した洗練されたNeumorphismスタイルのツールチップコンポーネントで、鮮やかな色を採用し、ダークモードのサポート用に設計されています。

プレビュー

HTMLコード 

<div class="relative group flex items-center">
    <!-- Tooltip Trigger -->
    <button class="bg-purple-600 text-white rounded-full p-2 shadow-lg focus:outline-none">
        Hover me
    </button>

    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-10">
        <div class="p-3">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <span class="font-semibold">John Doe</span>
            </div>
            <p class="mt-2">This is a tooltip description to provide additional information.</p>
        </div>
        <div class="rounded-lg bg-purple-600 p-2 text-white text-center font-bold transition-transform transform hover:scale-105">Learn More</div>
    </div>
</div>

関連コンポーネント

Minimalist_Tooltip

レスポンシブデザインとダークテーマをサポートするEコマース用のミニマリスト/フラットデザインツールチップコンポーネント。補色スキームを使用し、複雑さは中程度です。

開ける

ブルータリズム単色ツールチップ

ブログ/コンテンツサイト向けに設計された複雑なブルータリズムスタイルの単色ツールチップコンポーネントで、複数のインタラクティブ要素とダークモードサポートによる完全な応答性を備えています。

開ける

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

Tailwind CSS を使用したダッシュボード用の、複雑でレスポンシブなダークテーマ対応の Skeuomorphic-Vibrant Tooltip コンポーネント。JavaScript は必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像はpicsum.photosと randomuser.me からのものです。

開ける