Components Tooltip Tooltip Component

Tooltip Component

A simple responsive Tooltip component designed for blog content consumption, featuring a 3D design with a grayscale color scheme and dark mode support using Tailwind CSS.

Preview

HTML Code

<div class="relative group">
    <!-- Tooltip Trigger -->
    <button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
    
    <!-- Tooltip -->
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
        <div class="p-2">
            <p>This is a tooltip with 3D styling!</p>
        </div>
        <div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
    </div>
</div>

Related Components

Tooltip Component

A Neumorphism styled tooltip component for portfolio showcasing with dark mode support, responsive design, and using Tailwind CSS.

Open

Minimalist Tooltip

A minimalist and flat design tooltip component for blog/content websites, with monochromatic color scheme and simple layout. It is responsive and supports dark mode using Tailwind CSS.

Open

Tooltip

Tooltip Component with 3D Design, Earth tones, Simple complexity, and Dashboard purpose. Responsive with dark theme support.

Open