Home
Cristian
Native tooltip

Native tooltip

tooltip

This tailwind example is contributed by Cristian, on 17-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Tooltip

Author Cristian

2.3k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

.tooltip .tooltip-text {
            visibility: hidden;
            background-color: #000;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            width: max-content;
        }

.tooltip .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #000 transparent transparent transparent;
        }

.tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body class="bg-gray-200 p-8">
    <div class="flex justify-center">
        <div class="tooltip bg-blue-500 text-white p-2 rounded-lg">
            Hover aquí
            <span class="tooltip-text bg-blue-500">Este es un tooltip hecho con Tailwind CSS</span>
        </div>
    </div>
</body>

</html>

Related Examples

tooltip Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Tooltip - Right Aligned

Author:
Prashant

2 years ago

9.5k
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.9k
Credit card form

Author:
Oliver Hansen

2 years ago

16.3k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

1 month ago

152
Hero with description

Author:
Laurits

2 years ago

8.9k
header

Author:
alex_bel

1 year ago

3.2k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

Author:
INGRIDE MUZIRANENGE

1 week ago

32
Heart Shaped Rating Section

Author:
Gopi Yadav

2 years ago

12.5k
Appointment booking form

Author:
Leif99

2 years ago

16.8k
Modern CTA section
CTA with background patterns

Author:
Nomthandazo Mhlongo

1 year ago

2.1k
Sponsors section
icon grid

Author:
Sienna

2 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components