Component

HoverCard

Tooltip보다 많은 정보를 hover/focus로 보여주는 보조 패널입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { HoverCard, HoverCardTrigger, Button, HoverCardContent } from '@amineslab/ui'

function HoverCardExample({ align = 'center', sideOffset = 4, }: {
    align?: 'start' | 'center' | 'end';
    sideOffset?: number;
} = {}) {
    return (<HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">프로필 보기</Button>
      </HoverCardTrigger>
      <HoverCardContent align={align} sideOffset={sideOffset}>
        <p className="m-0 text-body-2 font-medium">민아</p>
        <p className="mt-1 mb-0 text-body-3 text-text-secondary">디자인 시스템을 관리합니다.</p>
      </HoverCardContent>
    </HoverCard>);
}

export default function ExamplePreview() {
  return ((<HoverCardExample align={"center"} sideOffset={4}/>))
}

Props

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@amineslab/ui'

`HoverCardContent`

보조 정보를 담는 부동 패널입니다.

Name	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Trigger를 기준으로 가로 정렬합니다.
`sideOffset`	`number`	`6`	Trigger와 패널 사이 거리입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

짧은 이름이나 상태 설명은 Tooltip을 사용하고, 프로필·미리보기처럼 여러 줄 콘텐츠가 필요한 경우 HoverCard를 사용하세요.
Trigger는 키보드 focus에도 열리며 중요한 작업은 HoverCard 안에만 두지 마세요.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: Trigger에 focus하면 패널이 열립니다.
Escape: 패널을 닫습니다.