Tooltips & Required fields (#11112)

* add tooltip component

* crayons doc

* z-index

* one less call

* doc

app/assets/stylesheets/components/forms.scss

@@ -163,6 +163,12 @@
     }
   }
 
+  &__required {
+    color: var(--accent-danger);
+    padding: 0 var(--su-1);
+    display: inline-block;
+  }
+
   &__description {
     color: var(--label-secondary);
     font-size: var(--fs-s);

app/assets/stylesheets/components/tooltips.scss

@@ -0,0 +1,31 @@
+.crayons-tooltip[data-tooltip] {
+  position: relative;
+
+  &:after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    background: var(--base-a90);
+    color: var(--base-inverted);
+    font-size: var(--fs-s);
+    padding: var(--su-2) var(--su-3);
+    max-width: 256px;
+    width: max-content;
+    border-radius: var(--radius);
+    font-family: var(--ff-sans-serif);
+    font-weight: var(--fw-normal);
+    line-height: var(--lh-tight);
+    transform: translateY(var(--su-1));
+    opacity: 0;
+    transition: all var(--transition-props);
+    z-index: 1000;
+  }
+
+  &:hover {
+    &:after {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

app/assets/stylesheets/crayons.scss

@@ -31,3 +31,4 @@
 @import 'components/tables';
 @import 'components/tabs';
 @import 'components/tags';
+@import 'components/tooltips';

app/views/pages/crayons.html.erb

@@ -55,6 +55,24 @@
   }
 </style>
 
+<div class="container">
+  <div class="body">
+    <h2>Tooltips</h2>
+    <p>Tooltips should be short, simple and without any styling - just pure text. Its purpose is to provide some additional context or explanation.</p>
+    <p>Keep in mind they should be only ADDITIONAL information since tooltips are accessible on :hover which means you may not really see the tooltip content while on mobile.</p>
+    <p>Hover over the label below to see a tooltip.</p>
+    <p>All you have to do to set up this kind of a tooltip is add <code>crayons-tooltip</code> class name to an element as well as <code>data-tooltip</code> attribute which will contain the tooltip content.</p>
+  </div>
+
+  <div>
+    <p>You can <strong class="crayons-tooltip" data-tooltip="Tooltip message">hover here</strong> to see the tooltip</p>
+  </div>
+
+  <pre><%= '
+  <p>You can <strong class="crayons-tooltip" data-tooltip="Tooltip message">hover here</strong> to ...</p>
+  '.rstrip %></pre>
+</div>
+
 <div class="container">
   <div class="body">
     <h2>Main Typography</h2>
@@ -366,7 +384,7 @@
 
   <div class="crayons-field">
     <label for="t1" class="crayons-field__label">
-      Textfield Label
+      Textfield Label <span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
       <p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
     </label>
     <input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">