añadido codigo de los tooltips

2026-04-01 13:10:44 -03:00 · 2025-11-26 18:29:59 -03:00
parent 9233b1fe48
commit 5421235a59
8 changed files with 169 additions and 18 deletions
--- a/src/lib/components/crear-post.svelte
+++ b/src/lib/components/crear-post.svelte
@@ -10,6 +10,9 @@
 	import { sesionStore } from '@/stores/usuario';
 	import type { CreatePostDto } from '../../types';
 	import { addPost } from '@/stores/posts';
+	import { Tooltip, TooltipProvider } from './ui/tooltip';
+	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
+	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';

 	let mensaje = $state('');

@@ -76,15 +79,24 @@
 					</p>
 					/ 280
 				</Kbd>
-				<InputGroupButton
-					variant="default"
-					type="submit"
-					class="transform rounded-full transition-transform ease-in hover:scale-120"
-					size="xs"
-				>
-					<p>Publicar</p>
-					<ArrowUpIcon />
-				</InputGroupButton>
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger class="*: flex">
+							<InputGroupButton
+								variant="default"
+								type="submit"
+								class="transform rounded-full transition-transform ease-in hover:scale-120"
+								size="xs"
+							>
+								<p>Publicar</p>
+								<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+							</InputGroupButton>
+						</TooltipTrigger>
+						<TooltipContent>
+							<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
 			</div>
 		</InputGroupAddon>
 	</InputGroup>
--- a/src/lib/components/ui/hover-card/hover-card-content.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: HoverCardPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPrimitive.Portal>
--- a/src/lib/components/ui/hover-card/hover-card-trigger.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />
--- a/src/lib/components/ui/hover-card/index.ts
+++ b/src/lib/components/ui/hover-card/index.ts
@@ -0,0 +1,14 @@
+import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+
+const Root = HoverCardPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+};
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>
--- a/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
--- a/src/routes/[perfil]/modalEditar.svelte
+++ b/src/routes/[perfil]/modalEditar.svelte
@@ -11,6 +11,9 @@
 	import DialogDescription from '@/components/ui/dialog/dialog-description.svelte';
 	import DialogHeader from '@/components/ui/dialog/dialog-header.svelte';
 	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
+	import { Tooltip, TooltipProvider } from '@/components/ui/tooltip';
+	import TooltipTrigger from '@/components/ui/tooltip/tooltip-trigger.svelte';
+	import TooltipContent from '@/components/ui/tooltip/tooltip-content.svelte';

 	interface Props {
 		post: Post | null;
@@ -53,15 +56,26 @@
 								</p>
 								/ 280
 							</Kbd>
-							<InputGroupButton
-								variant="default"
-								type="submit"
-								class="transform rounded-full transition-transform ease-in hover:scale-120"
-								size="xs"
-							>
-								<p>Modificar</p>
-								<ArrowUpIcon />
-							</InputGroupButton>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger>
+										<InputGroupButton
+											variant="default"
+											type="submit"
+											class="transform rounded-full transition-transform ease-in hover:scale-120"
+											size="xs"
+										>
+											<p class="flex items-center gap-1">
+												Modificar
+												<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+											</p>
+										</InputGroupButton>
+									</TooltipTrigger>
+									<TooltipContent>
+										<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
 						</div>
 					</InputGroupAddon>
 				</InputGroup>