feat: 实现Tooltip组件

This commit is contained in:
2025-12-25 15:44:48 +08:00
parent 4378d85fe8
commit 955dc99119
4 changed files with 63 additions and 0 deletions

View File

@ -0,0 +1,16 @@
<script lang="ts">
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
import type { Snippet } from 'svelte';
type Props = WithoutChildren<BitsTooltip.RootProps> & {
children?: Snippet;
};
let { children, ...restProps }: Props = $props();
</script>
<BitsTooltip.Provider delayDuration={0}>
<BitsTooltip.Root {...restProps}>
{@render children?.()}
</BitsTooltip.Root>
</BitsTooltip.Provider>

View File

@ -0,0 +1,30 @@
<script lang="ts">
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
import type { Snippet } from 'svelte';
import { fly } from 'svelte/transition';
type Props = WithoutChildren<BitsTooltip.ContentProps> & {
children?: Snippet;
};
let { children, ...restProps }: Props = $props();
</script>
<BitsTooltip.Portal>
<BitsTooltip.Content
forceMount
sideOffset={8}
class="tooltip z-0 flex items-center justify-center rounded-xl border border-base-content/20 bg-base-200 p-3 text-sm font-medium shadow-xl outline-hidden"
{...restProps}
>
{#snippet child({ wrapperProps, props, open })}
{#if open}
<div {...wrapperProps}>
<div {...props} transition:fly={{ y: 5, duration: 150 }}>
{@render children?.()}
</div>
</div>
{/if}
{/snippet}
</BitsTooltip.Content>
</BitsTooltip.Portal>

View File

@ -0,0 +1,14 @@
<script lang="ts">
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
import type { Snippet } from 'svelte';
type Props = WithoutChildren<BitsTooltip.TriggerProps> & {
children?: Snippet;
};
let { children, ...restProps }: Props = $props();
</script>
<BitsTooltip.Trigger class="tooltip tooltip-primary" {...restProps}>
{@render children?.()}
</BitsTooltip.Trigger>

View File

@ -0,0 +1,3 @@
export { default as Tooltip } from './Tooltip.svelte';
export { default as TooltipTrigger } from './TooltipTrigger.svelte';
export { default as TooltipContent } from './TooltipContent.svelte';