25 Beautiful HTML,CSS Tooltip Effects With Just Copy & Paste!

25 Beautiful HTML,CSS Tooltip Effects With Just Copy & Paste!

The Problem I Wanted to Solve

A few months ago, I was designing a website for a client who wanted to make their “Features” section more engaging. I knew tooltips would be perfect for providing extra details without cluttering the page. But when I started searching for a resource that gathered beautiful, ready-to-use tooltip effects in one place… I found nothing.

There were scattered tutorials for one or two effects, but no single, comprehensive guide. I had to spend hours digging through different sources, testing code, and adapting various styles. I thought: “If I, as a designer, find this frustrating, how difficult must it be for bloggers, small business owners, or fellow WordPress users who just want to make their site a little more beautiful?”

That’s when I decided to create the resource I wished I had. I dedicated time to curating, testing, and simplifying the most visually appealing tooltip effects I could find or create.

What You’ll Find in This Guide

In this article, I’m sharing 25 beautifully animated tooltip effects that you can add to your website today. The best part? You don’t need to be a coding expert. Each effect comes with ready-to-use code that you can simply copy and paste into your site.

From elegant fade-ins and smooth slides to playful bounces and eye-catching glow effects—I’ve gathered them all in one place for you.

Tooltip Effects Collection

25 unique tooltip animations

1. Fade In
Hover me
Simple fade-in effect
2. Slide Up
Hover me
Slides upward on hover
3. Bounce
Hover me
Bouncing animation
4. Rotate
Hover me
360-degree rotation
5. Scale
Hover me
Scaling animation
6. Flip
Hover me
3D flip effect
7. Zoom
Hover me
Zoom-in effect
8. Pop
Hover me
Combined slide and scale
9. Slide Right
Hover me
Slides from left to right
10. Slide Left
Hover me
Slides from right to left
11. Pulse
Hover me
Continuous pulsing effect
12. Swing
Hover me
Side-to-side swinging
13. Shake
Hover me
Shaking animation
14. Drop
Hover me
Falling drop effect
15. Grow
Hover me
Growth animation
16. Shrink
Hover me
Shrinking animation
17. Slide Down
Hover me
Slides downward
18. Flip Vertical
Hover me
Vertical flip
19. Rotate X
Hover me
Rotation around X-axis
20. Rotate Y
Hover me
Rotation around Y-axis
21. Wave
Hover me
Waving motion
22. Flash
Hover me
Flashing visibility
23. Fade Slide
Hover me
Combined fade and slide
24. RubberBand
Hover me
Elastic rubber band effect
25. Neon Glow
Hover me
Neon glow with pulsing effect

1. Fade in HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade In Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Fade In Tooltip Effect</h1>
        <div class="tooltip-container tooltip-1">
            Hover Over Me
            <div class="tooltip-text">This is a smooth fade-in tooltip</div>
        </div>
    </div>
</body>
</html>
CSS

Css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #4CAF50;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-1:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

2. Slide Up HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Up Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Up Tooltip Effect</h1>
        <div class="tooltip-container tooltip-2">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides up smoothly</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #FF5733;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #e04e2d;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-2:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

2. Slide Up HTML & CSS Code

Html:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

3. Bounce HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounce Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Bounce Tooltip Effect</h1>
        <div class="tooltip-container tooltip-3">
            Hover Over Me
            <div class="tooltip-text">This tooltip bounces into view!</div>
        </div>
    </div>
</body>
</html>
HTML

Css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #28A745;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #218838;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-3:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

4. Rotate HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Rotate Tooltip Effect</h1>
        <div class="tooltip-container tooltip-4">
            Hover Over Me
            <div class="tooltip-text">This tooltip rotates into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #fd746c 0%, #ff9068 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #E67E22;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #d35400;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-4:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotate(360deg);
    transition: transform 0.6s ease;
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

5. Scale HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scale Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Scale Tooltip Effect</h1>
        <div class="tooltip-container tooltip-5">
            Hover Over Me
            <div class="tooltip-text">This tooltip scales into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #9D50BB 0%, #6E48AA 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #9B59B6;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #8e44ad;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0.3);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-5:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

6. Flip HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flip Tooltip Effect</h1>
        <div class="tooltip-container tooltip-6">
            Hover Over Me
            <div class="tooltip-text">This tooltip flips into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #1ABC9C;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #16A085;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotateY(90deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-style: preserve-3d;
}

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

.tooltip-6:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotateY(0deg);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

7. Slide Up HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Zoom Tooltip Effect</h1>
        <div class="tooltip-container tooltip-7">
            Hover Over Me
            <div class="tooltip-text">This tooltip zooms into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #34495E 0%, #2C3E50 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #34495E;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #2C3E50;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

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

.tooltip-7:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

8. Pop HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Pop Tooltip Effect</h1>
        <div class="tooltip-container tooltip-8">
            Hover Over Me
            <div class="tooltip-text">This tooltip pops into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #F39C12;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #E67E22;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%, 20px) scale(0);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
}

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

.tooltip-8:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

9. Slide Right HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Right Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Right Tooltip Effect</h1>
        <div class="tooltip-container tooltip-9">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides from left!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #C0392B;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #E74C3C;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-70%, -10px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-9:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

10. Slide Left HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Left Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Left Tooltip Effect</h1>
        <div class="tooltip-container tooltip-10">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides from right!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #2ECC71;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #27AE60;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-30%, -10px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-10:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Slide Up HTML & CSS Code

Html:

CSS:

  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

3. Bounce HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounce Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Bounce Tooltip Effect</h1>
        <div class="tooltip-container tooltip-3">
            Hover Over Me
            <div class="tooltip-text">This tooltip bounces into view!</div>
        </div>
    </div>
</body>
</html>
HTML

Css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #28A745;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #218838;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-3:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

4. Rotate HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Rotate Tooltip Effect</h1>
        <div class="tooltip-container tooltip-4">
            Hover Over Me
            <div class="tooltip-text">This tooltip rotates into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #fd746c 0%, #ff9068 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #E67E22;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #d35400;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-4:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotate(360deg);
    transition: transform 0.6s ease;
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

5. Scale HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scale Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Scale Tooltip Effect</h1>
        <div class="tooltip-container tooltip-5">
            Hover Over Me
            <div class="tooltip-text">This tooltip scales into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #9D50BB 0%, #6E48AA 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #9B59B6;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #8e44ad;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0.3);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-5:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

6. Flip HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flip Tooltip Effect</h1>
        <div class="tooltip-container tooltip-6">
            Hover Over Me
            <div class="tooltip-text">This tooltip flips into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #1ABC9C;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #16A085;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotateY(90deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-style: preserve-3d;
}

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

.tooltip-6:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotateY(0deg);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

7. Slide Up HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Zoom Tooltip Effect</h1>
        <div class="tooltip-container tooltip-7">
            Hover Over Me
            <div class="tooltip-text">This tooltip zooms into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #34495E 0%, #2C3E50 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #34495E;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #2C3E50;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

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

.tooltip-7:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

8. Pop HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Pop Tooltip Effect</h1>
        <div class="tooltip-container tooltip-8">
            Hover Over Me
            <div class="tooltip-text">This tooltip pops into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #F39C12;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #E67E22;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%, 20px) scale(0);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
}

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

.tooltip-8:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

9. Slide Right HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Right Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Right Tooltip Effect</h1>
        <div class="tooltip-container tooltip-9">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides from left!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #C0392B;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #E74C3C;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-70%, -10px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-9:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

10. Slide Left HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Left Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Left Tooltip Effect</h1>
        <div class="tooltip-container tooltip-10">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides from right!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #2ECC71;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #27AE60;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-30%, -10px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-10:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

11. Pulse HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Pulse Tooltip Effect</h1>
        <div class="tooltip-container tooltip-11">
            Hover Over Me
            <div class="tooltip-text">This tooltip pulses continuously!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #8E44AD;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #9B59B6;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-11:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

12. Swing HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swing Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Swing Tooltip Effect</h1>
        <div class="tooltip-container tooltip-12">
            Hover Over Me
            <div class="tooltip-text">This tooltip swings into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #2980B9 0%, #3498DB 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #2980B9;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #3498DB;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-12:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: swing 0.8s ease;
}

@keyframes swing {
    20% {
        transform: translateX(-40%);
    }
    40% {
        transform: translateX(-60%);
    }
    60% {
        transform: translateX(-40%);
    }
    80% {
        transform: translateX(-60%);
    }
    100% {
        transform: translateX(-50%);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

13. Shake HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shake Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Shake Tooltip Effect</h1>
        <div class="tooltip-container tooltip-13">
            Hover Over Me
            <div class="tooltip-text">This tooltip shakes into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #D35400 0%, #E67E22 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #D35400;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #E67E22;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-13:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(-55%); }
    75% { transform: translateX(-45%); }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

14. Drop HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Drop Tooltip Effect</h1>
        <div class="tooltip-container tooltip-14">
            Hover Over Me
            <div class="tooltip-text">This tooltip drops into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #16A085 0%, #1ABC9C 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #16A085;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #1ABC9C;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%, -40px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

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

.tooltip-14:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

15. Grow HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grow Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Grow Tooltip Effect</h1>
        <div class="tooltip-container tooltip-15">
            Hover Over Me
            <div class="tooltip-text">This tooltip grows into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #7F8C8D 0%, #95A5A6 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #7F8C8D;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #95A5A6;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-15:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

16. Shrink HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shrink Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Shrink Tooltip Effect</h1>
        <div class="tooltip-container tooltip-16">
            Hover Over Me
            <div class="tooltip-text">This tooltip shrinks into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #27AE60;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #2ECC71;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(1.5);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-origin: bottom center;
}

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

.tooltip-16:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

17. Slide Down HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Down Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Slide Down Tooltip Effect</h1>
        <div class="tooltip-container tooltip-17">
            Hover Over Me
            <div class="tooltip-text">This tooltip slides down!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #E74C3C;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #C0392B;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 125%;
    left: 50%;
    transform: translate(-50%, -30px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-17:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

18. Flip Vertical HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Vertical Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flip Vertical Tooltip Effect</h1>
        <div class="tooltip-container tooltip-18">
            Hover Over Me
            <div class="tooltip-text">This tooltip flips vertically!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #9C27B0 0%, #8E44AD 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #9C27B0;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #8E44AD;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotateX(90deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-style: preserve-3d;
}

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

.tooltip-18:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotateX(0deg);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

19. Rotate X HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate X Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Rotate X Tooltip Effect</h1>
        <div class="tooltip-container tooltip-19">
            Hover Over Me
            <div class="tooltip-text">This tooltip rotates on X-axis!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #3F51B5;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #303F9F;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotateX(180deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-style: preserve-3d;
}

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

.tooltip-19:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotateX(0deg);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

20. Rotate Y HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Y Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Rotate Y Tooltip Effect</h1>
        <div class="tooltip-container tooltip-20">
            Hover Over Me
            <div class="tooltip-text">This tooltip rotates on Y-axis!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #00BCD4;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #0097A7;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) rotateY(180deg);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
    transform-style: preserve-3d;
}

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

.tooltip-20:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) rotateY(0deg);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

21. Wave HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Wave Tooltip Effect</h1>
        <div class="tooltip-container tooltip-21">
            Hover Over Me
            <div class="tooltip-text">This tooltip waves into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #CDDC39 0%, #8BC34A 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #CDDC39;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #8BC34A;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-21:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: wave 0.6s ease;
}

@keyframes wave {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) rotate(5deg);
    }
    50% {
        transform: translateX(-50%) rotate(-5deg);
    }
    75% {
        transform: translateX(-50%) rotate(3deg);
    }
    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

22. Flash HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flash Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flash Tooltip Effect</h1>
        <div class="tooltip-container tooltip-22">
            Hover Over Me
            <div class="tooltip-text">This tooltip flashes into view!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #FFC107;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #FF9800;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-22:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: flash 0.8s ease;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.3;
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

23. Fade Slide HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade Slide Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Fade Slide Tooltip Effect</h1>
        <div class="tooltip-container tooltip-23">
            Hover Over Me
            <div class="tooltip-text">This tooltip fades and slides!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #FF9800;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #F57C00;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.4s ease;
    z-index: 1;
}

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

.tooltip-23:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

24. RubberBand HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RubberBand Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>RubberBand Tooltip Effect</h1>
        <div class="tooltip-container tooltip-24">
            Hover Over Me
            <div class="tooltip-text">This tooltip has rubber band effect!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #795548 0%, #5D4037 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #795548;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.tooltip-container:hover {
    background: #5D4037;
    transform: translateY(-2px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #333;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.tooltip-24:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: rubber 0.8s ease;
}

@keyframes rubber {
    0% {
        transform: translateX(-50%) scaleX(1);
    }
    30% {
        transform: translateX(-50%) scaleX(1.25);
    }
    40% {
        transform: translateX(-50%) scaleX(0.75);
    }
    50% {
        transform: translateX(-50%) scaleX(1.15);
    }
    65% {
        transform: translateX(-50%) scaleX(0.95);
    }
    75% {
        transform: translateX(-50%) scaleX(1.05);
    }
    100% {
        transform: translateX(-50%) scaleX(1);
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

25. Neon Glow HTML & CSS Code

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Glow Tooltip</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Neon Glow Tooltip Effect</h1>
        <div class="tooltip-container tooltip-25">
            Hover Over Me
            <div class="tooltip-text">This tooltip has neon glow effect!</div>
        </div>
    </div>
</body>
</html>
HTML

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #0ff 0%, #0cc 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: #0ff;
    color: #000;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #0ff;
}

.tooltip-container:hover {
    background: #0cc;
    transform: translateY(-2px);
    box-shadow: 0 0 20px #0ff;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: #000;
    color: #0ff;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    z-index: 1;
    border: 1px solid #0ff;
}

.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-25:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    animation: neonGlow 1.5s infinite alternate;
}

@keyframes neonGlow {
    from {
        box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff;
    }
    to {
        box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    }
}
CSS
  1. Copy all html codes in note pad and Save it as test.html then
  2. Copy all CSS codes in note pad and Save it as style.css
  3. Then open test.html

Last modified: September 28, 2025

Join us telegram channel
Pin0LinkedIn0Shares0

Related posts:

  1. How to Add a Killer Calculator to Your WordPress Site No Plugin
  2. Gracie Bon and Her Celebrity Look-Alikes
  3. Taylor Swift AI Pictures
  4. Ai like Chatgpt For Coding