ui : render shared model row hints as native titles

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/actions/ActionIcon.svelte

@@ -15,8 +15,9 @@
 		size?: ButtonSize;
 		stopPropagationOnClick?: boolean;
 		tooltip?: string;
-		variant?: ButtonVariant;
+		tooltipAsTitle?: boolean;
 		tooltipSide?: TooltipSide;
+		variant?: ButtonVariant;
 	}
 
 	let {
@@ -30,12 +31,13 @@
 		size = 'sm',
 		stopPropagationOnClick = false,
 		tooltip,
+		tooltipAsTitle = false,
 		tooltipSide = TooltipSide.TOP,
 		variant = 'ghost'
 	}: Props = $props();
 
 	let innerWidth = $state(0);
-	const showTooltip = $derived(!!tooltip && innerWidth > 768);
+	const showTooltip = $derived(!!tooltip && !tooltipAsTitle && innerWidth > 768);
 </script>
 
 {#snippet button(props = {})}
@@ -51,6 +53,7 @@
 			onclick?.(e);
 		}}
 		{size}
+		title={tooltipAsTitle ? tooltip : undefined}
 		{variant}
 	>
 		{#if icon}

tools/ui/src/lib/components/app/models/ModelId.svelte

@@ -29,6 +29,8 @@
 		modalities?: ModelModalities;
 		supportsThinking?: boolean;
 		supportsToolUse?: boolean;
+		/** Native title for the root element; keeps long lists light where a floating tooltip per row is too costly. */
+		title?: string;
 		/** Context length in tokens; renders a context icon when set. */
 		contextLength?: number;
 		/** Min/max GGUF file size (main + draft) across quants; renders a range when set. */
@@ -60,6 +62,7 @@
 		supportsThinking = false,
 		supportsToolUse = false,
 		tags,
+		title,
 		wrap = false,
 		...rest
 	}: Props = $props();
@@ -169,6 +172,7 @@
 		class="flex min-w-0 items-center gap-1.5 {wrap ? 'flex-wrap' : ''} {iconsOnNewLine
 			? 'flex-col items-start'
 			: ''} {className}"
+		{title}
 		{...rest}
 	>
 		<span class="flex min-w-0 items-center gap-1.5 {wrap ? 'flex-wrap' : ''}">

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverAvatar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { DARK_INVERT_AVATAR_ORGS } from '$lib/constants';
 	import { HuggingFaceService } from '$lib/services';
 	import { SvelteSet } from 'svelte/reactivity';
@@ -85,35 +84,31 @@
 	{/if}
 
 	{#if quantOrg && quantOrg !== org}
-		<Tooltip.Root>
-			<Tooltip.Trigger
-				class="absolute {quantPositionClass} {quantSize} overflow-hidden rounded-full border border-background bg-muted "
-			>
-				{#if quantAvatarFailed}
-					<span
-						aria-hidden="true"
-						class="flex h-full w-full items-center justify-center rounded-full text-[8px] font-semibold text-white"
-						style="background-color: hsl({quantHue} 60% 45%)"
-					>
-						{quantOrg.charAt(0).toUpperCase()}
-					</span>
-				{:else}
-					<img
-						alt=""
-						class="{quantImageClass} rounded-full {invertQuant ? 'dark:invert' : ''}"
-						loading="lazy"
-						onerror={() => {
-							failedAvatarOrgs.add(quantOrg ?? '');
-							quantError = true;
-						}}
-						src={HuggingFaceService.getAvatarUrl(quantOrg)}
-					/>
-				{/if}
-			</Tooltip.Trigger>
-
-			<Tooltip.Content>
-				<p>{quantOrg}</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
+		<!-- native title instead of a floating tooltip: long model lists mount one badge per row -->
+		<span
+			class="absolute {quantPositionClass} {quantSize} overflow-hidden rounded-full border border-background bg-muted"
+			title={quantOrg}
+		>
+			{#if quantAvatarFailed}
+				<span
+					aria-hidden="true"
+					class="flex h-full w-full items-center justify-center rounded-full text-[8px] font-semibold text-white"
+					style="background-color: hsl({quantHue} 60% 45%)"
+				>
+					{quantOrg.charAt(0).toUpperCase()}
+				</span>
+			{:else}
+				<img
+					alt=""
+					class="{quantImageClass} rounded-full {invertQuant ? 'dark:invert' : ''}"
+					loading="lazy"
+					onerror={() => {
+						failedAvatarOrgs.add(quantOrg ?? '');
+						quantError = true;
+					}}
+					src={HuggingFaceService.getAvatarUrl(quantOrg)}
+				/>
+			{/if}
+		</span>
 	{/if}
 </span>