밀당 DS

시작하기

Tooltip

Feedback & Status

호버하거나 포커스하면 잠깐 나타나는 짧은 설명.

Usage

hover/포커스 시 짧은 보조 설명을 잠깐 표시. 화면 이동 없이 부연

import

import

import { Tooltip } from '@mildang/design-system/Tooltip';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

Tooltip Props

Prop

Type

Default

children
필수

ReactNode

지정 안 함

content
필수

ReactNode

지정 안 함

asChild

boolean

true

container

Element | DocumentFragment

지정 안 함

onClose

() => void

지정 안 함

sx

SystemStyleObject | SystemStyleObject[]

지정 안 함

내용과 동작

속성설명
용도호버(마우스), 포커스(키보드/스크린리더) 둘 다로 연다
내용1–2줄 짧은 문장을 권장한다. 링크는 두지 않되, onClose를 주면 콘텐츠 안에 닫기(X) 버튼 하나가 예외로 추가된다
역할role="tooltip", 트리거와의 연결(aria-describedby)은 radix-ui가 자동으로 관리한다
닫힘기본은 포커스 아웃/포인터 아웃, ESC로 자동 닫힌다. onClose를 주면 자동으로 닫히지 않고 사용자가 닫기 버튼을 눌러야 하는 지속형 툴팁으로 바뀐다

열린 상태

열린 상태를 상자 안에 고정해 보여줍니다 — 호버로만 뜨는 말풍선은 정지된 문서 카드에 잡히지 않습니다.

코드

import { useState } from 'react';
import { Tooltip as Tooltip } from '@mildang/design-system/Tooltip';
import { Button } from '@mildang/design-system/Button';

const TooltipClickToOpenExample = function Component() {
    const [open, setOpen] = useState(false);
    return (
      <Tooltip
        content={'hello world'}
        open={open}
        onOpenChange={() => {}}
        delayDuration={0}
        disableHoverableContent
      >
        <div>
          <Button onClick={() => setOpen((v) => !v)}>{open ? 'click to close' : 'click to open'}</Button>
        </div>
      </Tooltip>
    );
  };

export default TooltipClickToOpenExample;

예제

기본 사용

트리거에 마우스를 올리면 뜨는 말풍선 — 아이콘만 있는 버튼의 이름을 보충할 때 씁니다.

코드

Open in Playground
import type { ComponentProps } from 'react';
import { Tooltip as Tooltip } from '@mildang/design-system/Tooltip';
import { default as Text } from '@mildang/design-system/Text';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    content: 'Creating SASS variables helps to build a scalable and maintainable codebase.',
    align: 'start',
    side: 'top',
    delayDuration: 0,
  }) } as ComponentProps<typeof Tooltip>;

const TooltipDefaultExampleRender = (args: ComponentProps<typeof Tooltip>) => (
    <Tooltip {...args}>
      <Text variant="body-xl" width="fit-content">
        content
      </Text>
    </Tooltip>
  );

export default function TooltipDefaultExample(props: Partial<ComponentProps<typeof Tooltip>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tooltip>;
  return TooltipDefaultExampleRender(mergedProps);
}

AllDemos

코드

Open in Playground
import { css } from '@mildang/styled-system/css';
import { Tooltip as Tooltip } from '@mildang/design-system/Tooltip';
import { default as Text } from '@mildang/design-system/Text';

const tooltipStyle = css({
  border: '1px solid #CBCFD8',
  borderRadius: '4px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '80px',
  width: '100%',
});

const TooltipAllDemosExample = () => (
    <div
      className={css({
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 160px)',
        gap: '24px',
        alignItems: 'center',
        justifyContent: 'center',
      })}
    >
      <Tooltip content="Top" side="top" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Top
        </Text>
      </Tooltip>
      <Tooltip content="Top-Start" side="top" align="start" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Top-Start
        </Text>
      </Tooltip>
      <Tooltip content="Top-End" side="top" align="end" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Top-End
        </Text>
      </Tooltip>

      <Tooltip content="Bottom" side="bottom" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Bottom
        </Text>
      </Tooltip>
      <Tooltip content="Bottom-Start" side="bottom" align="start" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Bottom-Start
        </Text>
      </Tooltip>
      <Tooltip content="Bottom-End" side="bottom" align="end" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Bottom-End
        </Text>
      </Tooltip>

      <Tooltip content="Left" side="left" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Left
        </Text>
      </Tooltip>
      <Tooltip content="Left-Start" side="left" align="start" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Left-Start
        </Text>
      </Tooltip>
      <Tooltip content="Left-End" side="left" align="end" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Left-End
        </Text>
      </Tooltip>

      <Tooltip content="Right" side="right" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Right
        </Text>
      </Tooltip>
      <Tooltip content="Right-Start" side="right" align="start" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Right-Start
        </Text>
      </Tooltip>
      <Tooltip content="Right-End" side="right" align="end" delayDuration={0}>
        <Text variant="body-xl" className={tooltipStyle}>
          Right-End
        </Text>
      </Tooltip>
    </div>
  );

export default TooltipAllDemosExample;

MaxWidth

코드

Open in Playground
import type { ComponentProps } from 'react';
import { Tooltip as Tooltip } from '@mildang/design-system/Tooltip';
import { Button } from '@mildang/design-system/Button';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    content: 'Creating SASS variables helps to build a scalable and maintainable codebase.',
    side: 'bottom',
    align: 'center',
    delayDuration: 0,
  }) } as ComponentProps<typeof Tooltip>;

const TooltipMaxWidthExampleRender = (args: ComponentProps<typeof Tooltip>) => (
    <div
      style={{
        padding: '50px',
      }}
    >
      <Tooltip {...args}>
        <Button variant="tertiary" size="md">
          Max Width
        </Button>
      </Tooltip>
    </div>
  );

export default function TooltipMaxWidthExample(props: Partial<ComponentProps<typeof Tooltip>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Tooltip>;
  return TooltipMaxWidthExampleRender(mergedProps);
}

ClickToOpenWithClose

코드

Open in Playground
import { useState } from 'react';
import { Tooltip as Tooltip } from '@mildang/design-system/Tooltip';
import { Button } from '@mildang/design-system/Button';

const TooltipClickToOpenWithCloseExample = function Component() {
    const [open, setOpen] = useState(false);
    return (
      <Tooltip
        content="닫기 버튼으로 툴팁을 닫을 수 있습니다."
        open={open}
        onOpenChange={() => {}}
        delayDuration={0}
        disableHoverableContent
        onClose={() => setOpen(false)}
      >
        <div>
          <Button onClick={() => setOpen((v) => !v)}>{open ? 'click to close' : 'click to open'}</Button>
        </div>
      </Tooltip>
    );
  };

export default TooltipClickToOpenWithCloseExample;