Added Instructions Tooltip (#1362)

Rakesh9100 · Aug 10, 2024 · 3c5dc13 · 3c5dc13
1 parent 9586ef7
commit 3c5dc13
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 0 deletions.
diff --git a/Components/Tooltips/Instructions-Tooltip/index.html b/Components/Tooltips/Instructions-Tooltip/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Instructions Tooltips</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="item-hints">
+        <div class="hint" data-position="4">
+            <span class="hint-radius"></span>
+            <span class="hint-dot">Tip</span>
+            <div class="hint-content do--split-children">
+                <p>Use Navbar to navigate the website quickly and easily.</p>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/Components/Tooltips/Instructions-Tooltip/style.css b/Components/Tooltips/Instructions-Tooltip/style.css
@@ -0,0 +1,132 @@
+body{
+    background-color: #1a1a1a;
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.item-hints {
+    --purple: #720c8f;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    padding-right: 170px;
+}
+
+.item-hints .hint {
+    margin: 150px auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-hints .hint-dot {
+    z-index: 3;
+    border: 1px solid #ffe4e4;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    -webkit-transform: translate(-0%, -0%) scale(0.95);
+    transform: translate(-0%, -0%) scale(0.95);
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.item-hints .hint-radius {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -125px 0 0 -125px;
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+.item-hints .hint[data-position="1"] .hint-content {
+    top: 85px;
+    left: 50%;
+    margin-left: 56px;
+}
+
+.item-hints .hint-content {
+    width: 300px;
+    position: absolute;
+    z-index: 5;
+    padding: 35px 0;
+    opacity: 0;
+    transition: opacity 0.7s ease, visibility 0.7s ease;
+    color: #fff;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.item-hints .hint:hover .hint-content {
+    position: absolute;
+    z-index: 5;
+    padding: 35px 0;
+    opacity: 1;
+    -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
+    transition: opacity 0.7s ease, visibility 0.7s ease;
+    color: #fff;
+    visibility: visible;
+    pointer-events: none;
+}
+
+.item-hints .hint-content::before {
+    width: 0px;
+    bottom: 29px;
+    left: 0;
+    content: "";
+    background-color: #fff;
+    height: 1px;
+    position: absolute;
+    transition: width 0.4s;
+}
+
+.item-hints .hint:hover .hint-content::before {
+    width: 180px;
+    transition: width 0.4s;
+}
+
+.item-hints .hint-content::after {
+    -webkit-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+    -webkit-transform: rotate(-225deg);
+    transform: rotate(-225deg);
+    bottom: 29px;
+    left: 0;
+    width: 80px;
+    content: "";
+    background-color: #fff;
+    height: 1px;
+    position: absolute;
+    opacity: 1;
+    -webkit-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.item-hints .hint:hover .hint-content::after {
+    opacity: 1;
+    visibility: visible;
+}
+
+.item-hints .hint[data-position="4"] .hint-content {
+    bottom: 85px;
+    left: 50%;
+    margin-left: 56px;
+}
diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html
@@ -166,6 +166,19 @@ <h1>Help Tooltip</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Instructions Tooltip</h1>
+                <div class="preview">
+                    <a href="../../Components/Tooltips/Instructions-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/Instructions-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">