Tooltip툴팁

툴팁은 특정 요소에 대한 보충 텍스트 힌트나 컨텍스트 정보를 제공하여 사용자가 해당 요소의 기능이나 용도를 더 잘 이해할 수 있도록 합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/tooltip.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Tooltip } from 'mdui/components/tooltip.js';

사용 예시:

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

예시

순수 텍스트 툴팁

기본값은 순수 텍스트 툴팁입니다. content 속성으로 툴팁의 내용을 설정할 수 있습니다.

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

소스

content 슬롯을 통해 툴팁의 내용을 설정할 수도 있습니다.

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

소스

리치 툴팁

variant 속성을 rich로 설정하면 리치 툴팁을 만들 수 있습니다. headline 속성으로 툴팁의 제목을, content 속성으로 툴팁의 내용을 설정할 수 있습니다.

button

<mdui-tooltip
  variant="rich"
  headline="Rich tooltip"
  content="Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

소스

headline, content 슬롯을 통해 툴팁의 제목과 내용을 설정할 수 있습니다. action 슬롯을 통해 툴팁의 작업 버튼을 설정할 수 있습니다.

button

Rich tooltip

Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.

Action

<mdui-tooltip variant="rich">
  <mdui-button>button</mdui-button>
  <div slot="headline">Rich tooltip</div>
  <div slot="content">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

소스

위치

placement 속성으로 툴팁의 위치를 설정할 수 있습니다.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

소스

트리거 방식

trigger 속성으로 툴팁의 트리거 방식을 설정할 수 있습니다.

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

소스

열기/닫기 지연 시간

트리거 방식이 hover일 때 open-delay 및 close-delay 속성으로 각각 툴팁 열기 및 닫기 지연 시간을 설정할 수 있습니다. 단위는 밀리초입니다.

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

소스

비활성화 상태

disabled 속성을 추가하면 툴팁을 비활성화할 수 있습니다.

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
툴팁의 모양입니다. 기본값은 `plain`입니다. 사용 가능한 값: `plain`: 일반 텍스트, 간단한 한 줄 텍스트에 적합합니다. `rich`: 리치 텍스트, 제목, 본문 및 작업 버튼을 포함할 수 있습니다.
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
툴팁의 위치입니다. 기본값은 `auto`입니다. 사용 가능한 값: `auto`: 위치 자동 판단. `variant="plain"`일 때는 `top`을 우선 사용하고, `variant="rich"`일 때는 `bottom-right`를 우선 사용합니다. `top-left`: 왼쪽 상단에 위치 `top-start`: 상단, 왼쪽 정렬 `top`: 상단, 중앙 정렬 `top-end`: 상단, 오른쪽 정렬 `top-right`: 오른쪽 상단에 위치 `bottom-left`: 왼쪽 하단에 위치 `bottom-start`: 하단, 왼쪽 정렬 `bottom`: 하단, 중앙 정렬 `bottom-end`: 하단, 오른쪽 정렬 `bottom-right`: 오른쪽 하단에 위치 `left-start`: 왼쪽, 상단 정렬 `left`: 왼쪽, 중앙 정렬 `left-end`: 왼쪽, 하단 정렬 `right-start`: 오른쪽, 상단 정렬 `right`: 오른쪽, 중앙 정렬 `right-end`: 오른쪽, 하단 정렬
`open-delay`	`openDelay`	`number`	`150`
마우스 호버로 표시되는 지연 시간(밀리초)입니다.
`close-delay`	`closeDelay`	`number`	`150`
마우스 호버로 숨겨지는 지연 시간(밀리초)입니다.
`headline`	`headline`	`string`	-
툴팁의 제목입니다. `variant="rich"`일 때만 사용할 수 있습니다. `slot="headline"`을 통해서도 설정할 수 있습니다.
`content`	`content`	`string`	-
툴팁의 콘텐츠입니다. `slot="content"`을 통해서도 설정할 수 있습니다.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
트리거 방식입니다. 여러 값을 공백으로 구분하여 지정할 수 있습니다. 사용 가능한 값: `click`: 클릭 시 트리거 `hover`: 마우스 호버 시 트리거 `focus`: 포커스 시 트리거 `manual`: 프로그래밍 방식으로만 툴팁을 열고 닫을 수 있습니다. 다른 트리거 방식을 함께 지정할 수 없습니다.
`disabled`	`disabled`	`boolean`	`false`
툴팁을 비활성화할지 여부를 설정합니다.
`open`	`open`	`boolean`	`false`
툴팁을 표시할지 여부를 설정합니다.

이벤트

이름
`open`
툴팁 표시가 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 툴팁 열림을 막을 수 있습니다.
`opened`
툴팁 표시 애니메이션이 완료되면 발생합니다.
`close`
툴팁 숨김이 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 툴팁 닫힘을 막을 수 있습니다.
`closed`
툴팁 숨김 애니메이션이 완료되면 발생합니다.

Slots

이름
기본
툴팁의 트리거 대상 요소입니다. `default` slot의 첫 번째 요소만 대상 요소가 됩니다.
`headline`
툴팁의 제목입니다. `variant="rich"`일 때만 이 slot이 유효합니다.
`content`
툴팁의 콘텐츠로, HTML을 포함할 수 있습니다. 일반 텍스트만 포함하는 경우 `content` 속성을 대신 사용할 수 있습니다.
`action`
툴팁 하단의 버튼입니다. `variant="rich"`일 때만 이 slot이 유효합니다.

CSS Parts

이름
`popup`
툴팁의 컨테이너
`headline`
제목
`content`
본문
`action`
작업 버튼

CSS 사용자 정의 속성

이름
`--shape-corner-plain`
variant="plain"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--shape-corner-rich`
variant="rich"일 때 컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--z-index`
컴포넌트의 CSS `z-index` 값

이전 장

TextField 텍스트 필드

다음 장

TopAppBar 상단 앱 바