Label component for field level help

2020-03-16 15:06:59 -04:00
parent dc2c46e878
commit 8bc694fe63
8 changed files with 196 additions and 11 deletions
--- a/Oqtane.Client/wwwroot/css/app.css
+++ b/Oqtane.Client/wwwroot/css/app.css
@ -110,3 +110,68 @@ app {
    padding: inherit;
    vertical-align: inherit;
 }
+
+/* Tooltips */
+.app-tooltip {
+    cursor: help;
+    position: relative;
+}
+
+    .app-tooltip::before,
+    .app-tooltip::after {
+        left: 50%;
+        opacity: 0;
+        position: absolute;
+        z-index: -100;
+    }
+
+    .app-tooltip:hover::before,
+    .app-tooltip:focus::before,
+    .app-tooltip:hover::after,
+    .app-tooltip:focus::after {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        z-index: 100;
+    }
+
+    .app-tooltip::before {
+        border-style: solid;
+        border-width: 1em 0.75em 0 0.75em;
+        border-color: #3E474F transparent transparent transparent;
+        bottom: 100%;
+        content: "";
+        margin-left: -0.5em;
+        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
+        transform: scale(.6) translateY(-90%);
+    }
+
+    .app-tooltip:hover::before,
+    .app-tooltip:focus::before {
+        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+    }
+
+    .app-tooltip::after {
+        background: #3E474F;
+        border-radius: .25em;
+        bottom: 180%;
+        color: #EDEFF0;
+        content: attr(data-tip);
+        margin-left: -8.75em;
+        padding: 1em;
+        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+        transform: scale(.6) translateY(50%);
+        width: 17.5em;
+    }
+
+    .app-tooltip:hover::after,
+    .app-tooltip:focus::after {
+        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
+    }
+
+@media (max-width: 760px) {
+    .app-tooltip::after {
+        font-size: .75em;
+        margin-left: -5em;
+        width: 10em;
+    }
+}