KRDS Angular

툴팁 Tooltip ​

툴팁은 요소나 본문 텍스트에 제공되는 짧은 부가 설명이다. 설명이 필요한 대상 또는 별도의 활성화 버튼에 마우스를 올리거나 초점을 이동했을 때 설명 텍스트가 표시된다.

KRDS 가이드

기본 ​

content로 설명을 주고, 버튼 글자는 요소 안에 넣습니다. type으로 트리거 버튼 모양(default, icon, button)을 정합니다. 버튼에 마우스를 올리거나 초점을 주면 툴팁이 버튼 옆에 표시되고, 마우스나 초점이 떠나거나 Esc 키, 창 스크롤, 화면 크기 변경으로 닫힙니다. 버튼이 화면 오른쪽 절반에 있으면 왼쪽에, 아니면 오른쪽에 표시하고, 768px 이하 화면에서는 버튼 위나 아래에 표시합니다.

버튼의 접근 가능한 이름은 버튼 글자와 설명을 합친 것(aria-labelledby)이라, 아이콘만 있는 버튼도 설명으로 이름을 얻습니다.

ts
import { Component } from '@angular/core'
import { KrdsTooltip } from '@krds.ui/angular'

@Component({
  selector: 'demo-tooltip-basic',
  imports: [KrdsTooltip],
  template: `
    <div style="display: flex; align-items: flex-start; gap: 10px">
      <krds-tooltip content="툴팁의 기본 설정입니다">
        tooltip-horizontal <i class="svg-icon ico-angle right" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip type="icon" content="아이콘 버튼에 제공되는 툴팁">
        <span class="sr-only">도움말</span>
        <i class="svg-icon ico-help" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip type="button" content="버튼에 제공되는 툴팁">도움말</krds-tooltip>
    </div>
  `
})
export default class TooltipBasic {}

세로 배치 (vertical) ​

vertical을 지정하면 툴팁이 버튼 위나 아래에 표시됩니다.

ts
import { Component } from '@angular/core'
import { KrdsTooltip } from '@krds.ui/angular'

@Component({
  selector: 'demo-tooltip-vertical',
  imports: [KrdsTooltip],
  template: `
    <div style="display: flex; align-items: flex-start; gap: 10px">
      <krds-tooltip vertical content="툴팁의 기본 설정입니다">
        tooltip-horizontal <i class="svg-icon ico-angle right" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip vertical type="icon" content="아이콘 버튼에 제공되는 툴팁">
        <span class="sr-only">도움말</span>
        <i class="svg-icon ico-help" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip vertical type="button" content="버튼에 제공되는 툴팁">도움말</krds-tooltip>
    </div>
  `
})
export default class TooltipVertical {}

박스형 (box) ​

box를 지정하면 여러 줄 설명에 맞는 박스형 툴팁이 버튼 위나 아래에 표시됩니다.

ts
import { Component } from '@angular/core'
import { KrdsTooltip } from '@krds.ui/angular'

@Component({
  selector: 'demo-tooltip-box',
  imports: [KrdsTooltip],
  template: `
    <div style="display: flex; align-items: flex-start; gap: 10px">
      <krds-tooltip box content="툴팁의 기본 설정입니다">
        tooltip-horizontal <i class="svg-icon ico-angle right" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip box type="icon" content="아이콘 버튼에 제공되는 툴팁">
        <span class="sr-only">도움말</span>
        <i class="svg-icon ico-help" aria-hidden="true"></i>
      </krds-tooltip>
      <krds-tooltip box type="button" content="버튼에 제공되는 툴팁">도움말</krds-tooltip>
    </div>
  `
})
export default class TooltipBox {}

KrdsTooltip ​

선택자 krds-tooltip

Inputs

이름타입기본값설명
content (필수)string-설명
type'default' | 'icon' | 'button''default'버튼 형태
verticalbooleanfalse위아래로 펼침
boxbooleanfalse상자형
disabledbooleanfalse비활성화