feat(tooltip): CSS-Only tooltip

src/dev/pages/tooltip/tooltip.ejs

@@ -27,6 +27,12 @@
       </forge-tooltip>
     </div>
   </section>
+  <section class="vert">
+    <h3 class="forge-typography--heading2">CSS Only</h3>
+    <div class="forge-tooltip" data-text="CSS-Only tooltip" style="width: fit-content;">
+      <span style="text-decoration: underline dotted;">Hover me</span>
+    </div>
+  </section>
 </div>
 
 <script type="module" src="tooltip.ts"></script>

src/dev/pages/tooltip/tooltip.ts

@@ -1,6 +1,7 @@
 import '$src/shared';
 import '@tylertech/forge/button';
 import '@tylertech/forge/tooltip';
+import '@tylertech/forge/tooltip/forge-tooltip.scss';
 import './tooltip.scss';
 import { ITooltipComponent } from '@tylertech/forge/tooltip';
 import { ISelectComponent } from '@tylertech/forge/select';

src/lib/tooltip/_animations.scss

@@ -8,6 +8,18 @@
 
   to {
     opacity: 1;
-    transform: translateX(0) translateY(0);
+    transform: translateX(0) translateY(#{token(slideout-y, custom)});
+  }
+}
+
+@keyframes slidein-arrow {
+  from {
+    opacity: 0;
+    transform: translate(#{token(slidein-x, custom)}) translateY(#{token(slidein-y, custom)}) rotate(#{token(arrow-rotation, custom)});
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0) translateY(#{token(slideout-y, custom)}) rotate(#{token(arrow-rotation, custom)});
   }
 }

src/lib/tooltip/build.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
+  "extends": "../build.json",
+  "stylesheets": ["./forge-tooltip.scss"]
+}

src/lib/tooltip/forge-tooltip.scss

@@ -0,0 +1,76 @@
+@use './core' as *;
+@use './animations';
+@use '../core/styles/typography';
+
+.forge-tooltip {
+  @include tokens;
+  #{declare(slidein-x)}: -10px;
+  #{declare(slidein-y)}: -50%;
+  #{declare(slideout-y)}: -50%;
+  #{declare(right-margin)}: calc(100% + 6px);
+  #{declare(arrow-clip-path)}: polygon(0 0, 0 100%, 100% 100%);
+  position: relative;
+
+  &::before {
+    @include typography.style(body1);
+    content: attr(data-text);
+    position: absolute;
+    top: 50%;
+    left: #{token(right-margin, custom)};
+    margin-left: calc(#{token(arrow-width)}/ 2 + #{token(border-width)});
+    display: none;
+
+    background: #{token(background)};
+    color: #{token(color)};
+
+    width: #{token(width)};
+    max-width: #{token(max-width)};
+    pointer-events: none;
+    text-align: #{token(content-align)};
+    line-height: normal;
+    white-space: normal;
+
+    border-radius: #{token(shape)};
+    border-width: #{token(border-width)};
+    border-style: #{token(border-style)};
+    border-color: #{token(border-color)};
+    padding-block: #{token(padding-block)};
+    padding-inline: #{token(padding-inline)};
+    box-shadow: #{token(elevation)};
+  }
+
+  &:hover::before {
+    display: block;
+    animation-duration: #{token(animation-duration)};
+    animation-timing-function: #{token(animation-timing)};
+    animation-name: slidein;
+    animation-fill-mode: forwards;
+  }
+
+  &:hover::after {
+    display: block;
+    animation-duration: #{token(animation-duration)};
+    animation-timing-function: #{token(animation-timing)};
+    animation-name: slidein-arrow;
+    animation-fill-mode: forwards;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: #{token(right-margin, custom)};
+    height: #{token(arrow-height)};
+    width: #{token(arrow-width)};
+    border-width: #{token(border-width)};
+    border-style: #{token(border-style)};
+    border-color: #{token(border-color)};
+    background: #{token(background)};
+    color: #{token(color)};
+    display: none;
+    border-end-start-radius: #{token(arrow-shape)};
+    clip-path: #{token(arrow-clip-path, custom)};
+
+    @include arrow-placement-right;
+  }
+}