Merge pull request you-dont-need#758 from rohitmane01/add-tooltip-demo

aayush105 · web-flow · commit 43c1e48f8a80 · 2025-10-05T19:32:57.000+05:45
feat: add CSS-only Tooltip demo with delay and fade-in effect + Demo video
diff --git a/ToolTip with Delay/ToolTipVideo.mp4 b/ToolTip with Delay/ToolTipVideo.mp4
diff --git a/ToolTip with Delay/tooltip.css b/ToolTip with Delay/tooltip.css
@@ -0,0 +1,68 @@
+/* Reset */
+body {
+  font-family: sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #fafafa;
+}
+
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Target element */
+.tooltip-target {
+  padding: 10px 20px;
+  border: none;
+  background: #0077cc;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+/* Tooltip text */
+.tooltip-text {
+  visibility: hidden;
+  opacity: 0;
+  width: max-content;
+  background: #333;
+  color: #fff;
+  text-align: center;
+  padding: 6px 12px;
+  border-radius: 4px;
+  
+  position: absolute;
+  bottom: 125%; /* above the button */
+  left: 50%;
+  transform: translateX(-50%);
+  
+  white-space: nowrap;
+  pointer-events: none;
+
+  /* Animation */
+  transition: opacity 0.3s ease;
+  transition-delay: 0s; /* will be updated on hover */
+}
+
+/* Tooltip arrow */
+.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;
+}
+
+/* Show tooltip with delay */
+.tooltip-target:hover + .tooltip-text,
+.tooltip-target:focus + .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0.5s; /* delay before showing */
+}
diff --git a/ToolTip with Delay/tooltip.html b/ToolTip with Delay/tooltip.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSS-only Tooltip with Delay</title>
+  <link rel="stylesheet" href="tooltip.css">
+</head>
+<body>
+
+  <div class="tooltip-container">
+    <button class="tooltip-target">Hover me</button>
+    <span class="tooltip-text">I am a tooltip with a delay!</span>
+  </div>
+
+</body>
+</html>
