HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS transition-delay Tooltip</title>

  <style>

    body {

      font-family: system-ui, sans-serif;

      padding: 20px;

      background: #f8fafc;

      color: #334155;

    }



    .wrap {

      position: relative;

      display: inline-block;

    }



    .trigger {

      padding: 0.5rem 1rem;

      background: #2563eb;

      color: #fff;

      border: none;

      border-radius: 0.35rem;

      cursor: pointer;

      font-size: 1rem;

    }



    .tooltip {

      position: absolute;

      left: 50%;

      bottom: calc(100% + 8px);

      transform: translateX(-50%);

      padding: 0.35rem 0.6rem;

      background: #0f172a;

      color: #f8fafc;

      font-size: 0.8125rem;

      border-radius: 0.25rem;

      white-space: nowrap;

      opacity: 0;

      pointer-events: none;

      transition: opacity 0.2s ease;

      transition-delay: 0.4s;

    }



    .wrap:hover .tooltip {

      opacity: 1;

    }

  </style>

</head>

<body>

  <h1>Delayed Tooltip</h1>

  <p>Hover the button and hold briefly to see the tooltip appear.</p>

  <div class="wrap">

    <button type="button" class="trigger">Save</button>

    <span class="tooltip" role="tooltip">Saves your changes</span>

  </div>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS transition-delay Property - Tooltip Appear