Tooltip

        <!--
@component
## 概要
- ユーザーが要素にカーソルを合わせた際に補足情報を表示するコンポーネントです

## 機能
- 補足情報を表示します

## Usage
```svelte
<Tooltip>ツールチップ</Tooltip>
```
-->

<script module lang="ts">
  import type { Snippet } from 'svelte';
  import type { ClassValue } from 'svelte/elements';
  import { cva, type VariantProps } from 'class-variance-authority';

  export const tooltipVariants = cva('inline-flex items-center px-3 py-1.5 bg-base-container-primary rounded-md shadow-md font-regular leading-none text-base-foreground-on-fill-inverse text-sm',
  );

  export type TooltipVariants = VariantProps<typeof tooltipVariants>;

  export interface TooltipProps extends TooltipVariants {
    /** クラス */
    class?: ClassValue;
    children?: Snippet<[]>;
  }
</script>

<script lang="ts">
  let { class: className, children }: TooltipProps = $props();

  let tooltipVariantClass = $derived(tooltipVariants({ class: className }));
</script>

<div class={tooltipVariantClass}>
  {@render children?.()}
</div>