Tooltip + dev=true

2025-11-12 15:01:10 +01:00
parent 9a5944bc20
commit c178a0e695
6 changed files with 129 additions and 0 deletions
--- a/tooltip/style.css
+++ b/tooltip/style.css
@@ -0,0 +1,42 @@
+.idm_tooltip{
+  --tooltip-background: #111;
+  --tooltip-border: #999;
+  --tooltip-color: #fff;
+  
+  position: relative;
+  &__info_icon{
+    color: var(--tooltip-border);
+    &:before{
+      content: "";
+      display: block;
+      width: 1.2rem;
+      height: 1.2rem;
+      margin-left: 0.5rem;
+      cursor: pointer;
+      vertical-align: bottom;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='idm_tooltip__info_icon' viewBox='0 0 16 16'%3E%3Cpath d='M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14.667A6.667,6.667,0,1,1,14.667,8,6.667,6.667,0,0,1,8,14.667Z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M11.333,10h-.667a.667.667,0,1,0,0,1.333h.667v4a.667.667,0,0,0,1.333,0v-4A1.333,1.333,0,0,0,11.333,10Z' transform='translate(-3.333 -3.333)' fill='currentColor'%3E%3C/path%3E%3Ccircle cx='1' cy='1' r='1' transform='translate(7 3.333)' fill='currentColor'%3E%3C/circle%3E%3C/svg%3E");
+      background-size: cover;
+    }
+  }
+  &__content{
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    border-radius: 5px;
+    background: var(--tooltip-background);
+    color: var(--tooltip-color);
+    border: 1px solid var(--tooltip-border);
+    bottom: 150%;
+    padding: 0.5rem 1rem;
+    @media @tablet{
+      &.--one-line{
+        white-space: nowrap;
+      }
+    }
+    &.--visible{
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}