diff --git a/apps/ui.immich.app/src/routes/(docs)/components/tooltip/BasicExample.svelte b/apps/ui.immich.app/src/routes/(docs)/components/tooltip/BasicExample.svelte index 3498bc84..fb78c138 100644 --- a/apps/ui.immich.app/src/routes/(docs)/components/tooltip/BasicExample.svelte +++ b/apps/ui.immich.app/src/routes/(docs)/components/tooltip/BasicExample.svelte @@ -1,6 +1,11 @@ @@ -8,4 +13,7 @@ Hover me + + + diff --git a/packages/ui/src/lib/internal/Select.svelte b/packages/ui/src/lib/internal/Select.svelte index 5d9df5d4..ac36a12e 100644 --- a/packages/ui/src/lib/internal/Select.svelte +++ b/packages/ui/src/lib/internal/Select.svelte @@ -3,6 +3,7 @@ import Icon from '$lib/components/Icon/Icon.svelte'; import Label from '$lib/components/Label/Label.svelte'; import Text from '$lib/components/Text/Text.svelte'; + import Tooltip from '$lib/components/Tooltip/Tooltip.svelte'; import { zIndex } from '$lib/constants.js'; import { styleVariants } from '$lib/styles.js'; import type { SelectCommonProps, SelectOption } from '$lib/types.js'; @@ -30,6 +31,7 @@ asLabel = (options: SelectOption[]) => options.map(({ label }) => label).join(', '), placeholder, class: className, + title, }: Props = $props(); const asOptions = (items: string[] | SelectOption[]) => { @@ -185,44 +187,49 @@ items={options.map(({ value, label, disabled }) => ({ value, label: label ?? value, disabled }))} {onValueChange} > - - - + {#snippet child({ props })} + - {selectedLabel || placeholder} - + + + {selectedLabel || placeholder} + - - - + + + + {/snippet} + diff --git a/packages/ui/src/lib/types.ts b/packages/ui/src/lib/types.ts index c66d3eaa..63ae72fe 100644 --- a/packages/ui/src/lib/types.ts +++ b/packages/ui/src/lib/types.ts @@ -246,6 +246,7 @@ export type SelectCommonProps = { shape?: Shape; placeholder?: string; class?: string; + title?: string; }; export type SelectProps = SelectCommonProps & {