feat: add Tooltip component and update styles in Button and index page

src/components/Button/button.astro

@@ -1,38 +1,40 @@
 ---
 export interface Props {
-  type?:     'primary' | 'secondary' | 'ghost' | 'danger';
+  type?: "primary" | "secondary" | "ghost" | "danger";
-  size?:     'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   disabled?: boolean;
   icon?: boolean;
   href?: string;
-  htmlType?: 'button' | 'submit' | 'reset';
+  htmlType?: "button" | "submit" | "reset";
 }
 const {
-  type = 'primary',
+  type = "primary",
-  size = 'md',
+  size = "md",
   disabled = false,
   icon = false,
   href,
-  htmlType = 'button',
+  htmlType = "button",
   ...rest
 } = Astro.props;
 
 const classes = [
-  'button',
+  "button",
   `button__${type}`,
   `button--${size}`,
-  icon ? 'button--icon' : '',
+  icon ? "button--icon" : "",
-  disabled ? 'button--disabled' : '',
+  disabled ? "button--disabled" : "",
-].filter(Boolean).join(' ');
+]
+  .filter(Boolean)
+  .join(" ");
 
-const Tag = href ? 'a' : 'button';
+const Tag = href ? "a" : "button";
 ---
 
 <Tag
   class={classes}
   href={href}
   type={href ? undefined : htmlType}
-  aria-disabled={disabled ? 'true' : undefined}
+  aria-disabled={disabled ? "true" : undefined}
   {...rest}
 >
   <slot name="icon-left" />
@@ -41,5 +43,5 @@ const Tag = href ? 'a' : 'button';
 </Tag>
 
 <style lang="scss">
-@use './_button.scss';
+  @use "./_button.scss";
 </style>

src/components/Tooltip/_tooltip.scss

@@ -0,0 +1,45 @@
+@use "../../styles/tokens/typography" as *;
+
+.tooltip {
+  position: relative;
+  display: inline-flex;
+  &__bubble {
+    position: absolute;
+    white-space: nowrap;
+    padding: var(--nds-spacing-2xs) var(--nds-spacing-xs);
+    background-color: var(--nds-text);
+    color: var(--nds-background);
+    border-radius: var(--nds-radius-sm);
+    @include text-sm;
+    font-weight: 500;
+    box-shadow: var(--nds-shadow-md);
+    z-index: 100;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 130ms ease;
+  }
+  &:hover &__bubble,
+  &:focus-within &__bubble {
+    opacity: 1;
+  }
+  &--top &__bubble {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, -6px);
+  }
+  &--bottom &__bubble {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 6px);
+  }
+  &--left &__bubble {
+    right: 100%;
+    top: 50%;
+    transform: translate(-6px, -50%);
+  }
+  &--right &__bubble {
+    left: 100%;
+    top: 50%;
+    transform: translate(6px, -50%);
+  }
+}

src/components/Tooltip/tooltip.astro

@@ -0,0 +1,16 @@
+---
+export interface Props {
+  label: string;
+  position?: "top" | "bottom" | "left" | "right";
+}
+const { label, position = "top" } = Astro.props;
+---
+
+<span class={`tooltip tooltip--${position}`}>
+  <slot />
+  <span class="tooltip__bubble" role="tooltip">{label}</span>
+</span>
+
+<style lang="scss">
+  @use "./_tooltip.scss";
+</style>

src/pages/index.astro

@@ -384,10 +384,16 @@ const libraryIcons = [
 <style lang="scss">
   @use '../styles/tokens/typography' as *;
 
+  body {
+    background-color: var(--nds-surface);
+    color: var(--nds-text);
+    font-family: var(--nds-font-sans);
+  }
   .gallery {
     max-width: 1000px;
     margin: 0 auto;
     padding: var(--nds-spacing-xl) var(--nds-spacing-lg) var(--nds-spacing-3xl);
+    background-color: var(--nds-surface);
   }
 
   .gallery__head {