Add Customizable Tooltip

Rakesh9100 · Aug 7, 2024 · bfa6746 · bfa6746
1 parent 0007609
commit bfa6746
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/Components/Tooltips/Customizable-Tooltip/index.html b/Components/Tooltips/Customizable-Tooltip/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customizable Tooltip</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body>
+    <section class="flex items-center justify-center h-screen">
+        <div class="flex flex-col items-center gap-2">
+            <div class="group relative bg-zinc-300 p-2 rounded-full">
+                <span>Top</span>
+                <div
+                    class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -top-2 -translate-y-full left-1/2 -translate-x-1/2">
+                    <span class="text-zinc-400 whitespace-nowrap">Info</span>
+                    <div class="bg-inherit rotate-45 p-1 absolute bottom-0 translate-y-1/2 left-1/2 -translate-x-1/2">
+                    </div>
+                </div>
+            </div>
+
+            <div class="group relative bg-zinc-300 p-2 rounded-full">
+                <span>Left</span>
+                <div
+                    class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -left-2 -translate-x-full">
+                    <span class="text-zinc-400 whitespace-nowrap">Info</span>
+                    <div class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2">
+                    </div>
+                </div>
+            </div>
+
+            <div class="group relative bg-zinc-300 p-2 rounded-full">
+                <span>Right</span>
+                <div
+                    class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -right-2 translate-x-full">
+                    <span class="text-zinc-400 whitespace-nowrap">Info</span>
+                    <div class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                    </div>
+                </div>
+            </div>
+
+            <div class="group relative bg-zinc-300 p-2 rounded-full">
+                <span>Bottom</span>
+                <div
+                    class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -bottom-2 translate-y-full left-1/2 -translate-x-1/2">
+                    <span class="text-zinc-400 whitespace-nowrap">Info</span>
+                    <div class="bg-inherit rotate-45 p-1 absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html
@@ -114,6 +114,19 @@ <h1>Animated Tooltip</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Customizable Tooltip</h1>
+                <div class="preview">
+                    <a href="../../Components/Tooltips/Customizable-Tooltip/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tooltips/Customizable-Tooltip" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Linked Apps Tooltip</h1>
                 <div class="preview">