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

Props

`HelpBubbleTrigger`

Prop

Type

`HelpBubbleAnchor`

Prop

Type

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 { Box } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

export default function HelpBubblePreview() {
  return (
    <div className="grid grid-cols-3 gap-20 p-40">
      <HelpBubbleTrigger
        open
        flip={false}
        placement="top-end"
        title="top-end"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="top"
        title="top"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="top-start"
        title="top-start"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="left-end"
        title="left-end"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <Box />
      <HelpBubbleTrigger
        open
        flip={false}
        placement="right-end"
        title="right-end"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="left"
        title="left"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <Box />
      <HelpBubbleTrigger
        open
        flip={false}
        placement="right"
        title="right"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="left-start"
        title="left-start"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <Box />
      <HelpBubbleTrigger
        open
        flip={false}
        placement="right-start"
        title="right-start"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="bottom-end"
        title="bottom-end"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="bottom"
        title="bottom"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
      <HelpBubbleTrigger
        open
        flip={false}
        placement="bottom-start"
        title="bottom-start"
        description="est tempor aute"
      >
        <ActionButton variant="neutralWeak">열기</ActionButton>
      </HelpBubbleTrigger>
    </div>
  );
}

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