Gradient Wave Tooltip

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Wave Tooltip</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      margin: 0;
    }
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 220px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      color: #000;
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
      animation: slideIn 0.5s forwards;
    }
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
      transform: translateX(-50%) translateY(-10px);
    }
    .tooltip .tooltip-text::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -10px;
      border-width: 10px;
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.3) transparent transparent transparent;
    }
    .tooltip .tooltip-icon {
      font-size: 2rem;
      color: #fff;
      transition: transform 0.5s, color 0.5s;
    }
    .tooltip:hover .tooltip-icon {
      transform: scale(1.2);
      color: #ff6a95;
    }
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
      }
    }
  </style>
</head>
<body>
  <div class="tooltip">
    <i class="fas fa-question-circle tooltip-icon"></i>
    <div class="tooltip-text">
      Gradient Wave Tooltip with a unique sliding effect!
    </div>
  </div>
</body>
</html>

Gradient Wave Tooltip - MeggiTools