💡

Tooltip

Created

2026/01/14 12:33

Context

Sidebar 컴포넌트 내부 구조를 분석하던 중 Sidebar 내부에서 Tooltip을 활용하는 부분을 발견하였다. 이처럼 shadcn/ui는 여러 컴포넌트를 다른 컴포넌트에서 재활용하는 멋진 모습을 확인할 수 있다. 재활용을 어떻게 하는지, 내부구조는 어떻게 작성 되어있는지 분석할 필요성이 있다고 판단하였다.

Agenda

•

Tooltip 컴포넌트의 내부 구조를 분석하고 이해하는 것을 목표로 함

TooltipProvider

SidebarProvider의 마지막의 return에서 아래와 같이 TooltipProvider를 호출한다.

return (
	<SidebarContext.Provider value={contextValue}>
		<TooltipProvider delayDuration={0}>
...
		</TooltipProvider>
	</SidebarContext.Provider>
);
JavaScript
복사

Tooltip의 예시는 공식문서에서 확인할 수 있으며, Sidebar 내부에서 이를 커스터마이징 해서 사용한다.

...
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
...

const TooltipProvider = ({
	delayDuration = 0,
	...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {
	return (
		<TooltipPrimitive.Provider
			data-slot='tooltip-provider'
			delayDuration={delayDuration}
			{...props}
		/>
	);
};
JavaScript
복사

TooltipProvider는 위와 같이 구성 되어있다. TooltipPrimitive.Provider라는 것을 사용하는데, 이 것은 radix-ui에 있는 컴포넌트이다. radix-ui에서 제공하는 Tooltip을 사용하기 때문에 Sidebar처럼 Provider를 만들고, Context를 만드는 과정을 수행하지 않아도 된다.

radix-ui의 react-tooltip은 default export가 없고 아래와 같이 export { } 형태로 모듈을 export 한다.

export { Arrow, Content, Portal, Provider, Root, Tooltip, TooltipArrow, type TooltipArrowProps, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipPortalProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, Trigger, createTooltipScope };
JavaScript
복사

만약 *를 지우고 Provider만 import하고 싶으면 다음과 같이 하면 된다.

import { Provider as TooltipPrimitiveProvider } from '@radix-ui/react-tooltip';
JavaScript
복사

delayDuration 파라미터는 number 타입으로 Tooltip이 나타나는 딜레이를 결정한다. 여기서는 0으로 기본값을 지정하여 바로 화면에 나타난다.

Tooltip

function Tooltip({
	...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
	return (
		<TooltipProvider>
			<TooltipPrimitive.Root data-slot='tooltip' {...props} />
		</TooltipProvider>
	);
}
JavaScript
복사

위는 shadcn/ui의 Tooltip 컴포넌트 구현부이다. TooltipProvider와 마찬가지로 Radix Tooltip을 shadcn/ui 스타일로 포장한 wrapper이다. 이 Tooltip은 React.ComponentProps<typeof TooltipPrimitive.Root>를 통해 radix-ui의 Tooltip - Root 컴포넌트에서 사용하는 모든 파라미터를 그대로 사용할 수 있다.

신기한 것은 위의 TooltipProvider를 이 Tooltip 컴포넌트에서도 사용한다는 것이다. radix-ui에서 Tooltip은 Provider 안에서만 사용할 수 있도록 설계가 되어있는데, 만약 사용자가 Provider를 잊어도 Tooltip을 사용할 수 있도록 설계가 되어있다. 그런데 만약에 사용자가 정상적으로 Provider를 배치했고 그 안에서 Tooltip을 사용한다면 Provider가 두 개 생기는 것인데, 불필요하지 않을까 생각 된다.

TooltipTrigger

const TooltipTrigger = ({
	...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {
	return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
};
JavaScript
복사

TooltipTrigger는 Tooltip을 켜고 끄는 버튼이다. 마찬가지로 radix-ui의 Trigger를 감싸는 wrapper 형태이며 radix-ui의 Trigger에서 사용하는 모든 파라미터를 받을 수 있고 넘겨준다.

TooltipContent

const TooltipContent = ({
	className,
	sideOffset = 0,
	children,
	...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) => {
	return (
		<TooltipPrimitive.Portal>
			<TooltipPrimitive.Content
				data-slot='tooltip-content'
				sideOffset={sideOffset}
				className={cn(
					'bg-foreground text-background',
					'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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
					'z-50 w-fit origin-(--radix-tooltip-content-transform-origin)',
					'rounded-md px-3 py-1.5 text-xs text-balance',
					className,
				)}
				{...props}
			>
				{children}
				<TooltipPrimitive.Arrow className='bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]' />
			</TooltipPrimitive.Content>
		</TooltipPrimitive.Portal>
	);
};
JavaScript
복사

Tooltip의 컨텐츠를 담는 컴포넌트이다. 구현부의 시작부터 특이한 부분이 존재한다. 바로 Portal이다. Portal을 사용하게되면 body 태그 안에 렌더링 하되 실제 다른 곳에 렌더링 한다. 논리적으로는 배치한 위치에 속하지만 실제 DOM 위치는 다른 곳에 렌더링 하는 것이다.

이렇게 하는 이유는 UI 컴포넌트 특성 때문인데, 툴팁이나 모달, 드롭다운, 팝오버 같은 컴포넌트는 z-index나 레이아웃 구조에 영향을 쉽게 받을 수 있다. 따라서 Portal을 사용해 항상 화면 위에 뜰 수 있도록 한다.

Tooltip

Context

Agenda

Contents