Help Bubble

Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.

import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubblePreview() {
  return (
    <HelpBubbleTrigger
      defaultOpen
      flip={true}
      title="타이틀"
      description="설명을 추가할 수 있어요."
    >
      <ActionButton>열기</ActionButton>
    </HelpBubbleTrigger>
  );
}

Installation

npx @seed-design/cli@latest add help-bubble

pnpm dlx @seed-design/cli@latest add help-bubble

yarn dlx @seed-design/cli@latest add help-bubble

bun x @seed-design/cli@latest add help-bubble

Props

Prop	Type	Default
`arrowPadding?`	`number`	`4`
`overflowPadding?`	`number`	`8`
`slide?`	`boolean`	`true`
`flip?`	`boolean \| Placement[]`	`true`
`gutter?`	`number`	-
`placement?`	`Placement`	`"bottom"`
`strategy?`	`"absolute" \| "fixed"`	`"absolute"`
`onOpenChange?`	`((open: boolean) => void)`	-
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	-
`contentProps?`	`HelpBubbleContentProps`	-
`children?`	`ReactNode`	-
`showCloseButton?`	`boolean`	-
`description?`	`string`	-
`title?`	`string`	-

Examples

Anchor

import { Avatar } from "seed-design/ui/avatar";
import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";

export default function HelpBubbleAnchorExample() {
  return (
    <HelpBubbleAnchor
      open
      title="Anchor"
      description="클릭으로 열고 닫는 동작 없이 위치만 지정합니다."
    >
      <Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
    </HelpBubbleAnchor>
  );
}

Placement

import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubblePreview() {
  return (
    <HelpBubbleTrigger
      open
      placement="bottom"
      title="Placement"
      description="Placement로 기본 위치를 설정할 수 있어요."
    >
      <ActionButton>열기</ActionButton>
    </HelpBubbleTrigger>
  );
}

Flip

import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubbleFlip() {
  return (
    <HelpBubbleTrigger
      open
      flip={false}
      title="Flip"
      description="Flip을 끄면 화면 경계에서 방향이 바뀌지 않아요."
    >
      <ActionButton>열기</ActionButton>
    </HelpBubbleTrigger>
  );
}

Close Button

import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubbleCloseButton() {
  return (
    <HelpBubbleTrigger
      defaultOpen
      showCloseButton
      title="Close Button"
      description="showCloseButton으로 닫기 버튼을 추가할 수 있어요."
    >
      <ActionButton>열기</ActionButton>
    </HelpBubbleTrigger>
  );
}

Title Only

import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubbleTitleOnly() {
  return (
    <HelpBubbleTrigger open title="Title Only">
      <ActionButton>열기</ActionButton>
    </HelpBubbleTrigger>
  );
}

Help Bubble

Manual Installation

On this page