feat: add generic tooltip component

styles/10-components-interactive-elements.css

@@ -1239,6 +1239,95 @@
       right: 0;
     }
 
+    .sg-tooltip-wrap {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+    .sg-tooltip-panel {
+      position: absolute;
+      z-index: var(--layer-pulldown-panel);
+      display: block;
+      width: var(--layout-tooltip-width);
+      max-width: calc(100vw - (2 * var(--spacing-large)));
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
+      padding: var(--spacing-large);
+      border-radius: var(--radius-tooltip);
+      color: var(--text-tooltip);
+      background: var(--surface-tooltip);
+      box-shadow: var(--shadow-overlay);
+    }
+
+    .sg-tooltip-panel[hidden] {
+      display: none;
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel {
+      top: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel {
+      bottom: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel {
+      top: 50%;
+      right: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel {
+      top: 50%;
+      left: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-panel::before {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      content: "";
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before {
+      top: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent var(--surface-tooltip);
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before {
+      bottom: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: var(--surface-tooltip) transparent transparent;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before {
+      top: 50%;
+      right: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent transparent var(--surface-tooltip);
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before {
+      top: 50%;
+      left: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: transparent var(--surface-tooltip) transparent transparent;
+      transform: translateY(-50%);
+    }
+
     .sg-pulldown-panel {
       position: absolute;
       top: calc(100% + var(--spacing-small));