dmolinari
83d76b95d4
Cambios:
- Instalado @radix-ui/react-tooltip 1.2.8 (componente faltante de
shadcn/ui que faltaba en el set inicial).
- Nuevo src/web/src/components/ui/tooltip.tsx (shadcn pattern):
TooltipProvider, Tooltip, TooltipTrigger, TooltipContent con
animaciones data-state (fade + zoom + slide direccional).
- App.tsx: TooltipProvider envuelve toda la app con delayDuration 150ms.
- AppSidebar refactorizado:
- Toggle button MOVIDO al header (top), al lado izquierdo del nombre
'SIG-CM 2.0'. Eliminado boton bottom (era redundante).
- Cuando collapsed: solo el toggle visible centrado (68px width).
- Cuando expanded: [Toggle] [SIG-CM 2.0] aligned left.
- Quitado overflow-hidden del aside (era lo que impedia que los
tooltips fueran visibles — los clipping containers padres tampoco
importan ahora porque Radix portalea el tooltip a body).
- Tooltips en TODOS los items collapsed (incluido el toggle) y en
items disabled muestra 'Label · Próximamente'.
- Eliminado el componente CSS-only SidebarTooltip (reemplazado por
Radix que se renderiza fuera del DOM tree con Portal).
El bug original era que tanto el aside con overflow-hidden como el
ProtectedLayout con overflow-hidden clipean cualquier elemento que
intente escapar via absolute positioning. Radix Portal soluciona
eso renderizando el tooltip en document.body.
Tests 136/136 verde.
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import * as React from 'react'
|
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const TooltipProvider = TooltipPrimitive.Provider
|
|
const Tooltip = TooltipPrimitive.Root
|
|
const TooltipTrigger = TooltipPrimitive.Trigger
|
|
|
|
const TooltipContent = React.forwardRef<
|
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
|
>(({ className, sideOffset = 8, ...props }, ref) => (
|
|
<TooltipPrimitive.Portal>
|
|
<TooltipPrimitive.Content
|
|
ref={ref}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
'z-50 overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs font-medium text-popover-foreground shadow-lg',
|
|
'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out',
|
|
'data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0',
|
|
'data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95',
|
|
'data-[side=right]:slide-in-from-left-1 data-[side=left]:slide-in-from-right-1',
|
|
'data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
</TooltipPrimitive.Portal>
|
|
))
|
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
|
|
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|