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

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

ユーザーエンゲージメントのためのマイクロインタラクションを備えたレスポンシブツールチップコンポーネントで、ダークテーマと魅力的なアニメーションが特徴です。

プレビュー

HTMLコード 

<div class="relative group">
    <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
        Hover me
    </button>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                <span class="font-semibold">John Doe</span>
            </div>
            <div>
                <p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
            </div>
            <img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
        </div>
    </div>
</div>
<!-- Dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1f2937;
        }
        .border-gray-700 {
            border-color: #374151;
        }
    }
</style>

関連コンポーネント

Minimalist_Tooltip

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

開ける

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

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

開ける

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

ソーシャルメディア用のブルータリズムスタイルのツールチップコンポーネントで、グレースケールの配色と複雑なインタラクティブ要素が特徴です。レスポンシブで、Tailwind CSSを使用したダークモードをサポートし、JavaScriptはありません。

開ける