Web Components Tooltip

    Ignite UI for Web Components Tooltip 구성 요소는 특정 요소에 대한 도구 설명을 표시하는 방법을 제공합니다. 툴팁은 요소와 관련된 정보를 표시하는 팝업으로, 일반적으로 요소가 키보드 포커스를 받거나 마우스가 그 위로 마우스를 가져갈 때 표시됩니다.

    Ignite UI for Web Components Tooltip Example

    시작하기

    사용하기IgcTooltipComponent 시작하려면, 먼저 다음 명령을 실행하여 Ignite UI for Web Components를 설치해야 합니다:

    npm install igniteui-webcomponents

    그 다음에는 필요한 CSS를 가져오IgcTooltipComponent 고, 그 모듈을 등록해야 합니다.

    import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTooltipComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    이제 Web ComponentsIgcTooltipComponent의 기본 구성부터 시작할 수 있습니다.

    <igc-tooltip anchor="hover-button">
  Congrats you've hovered the button!
</igc-tooltip>

<igc-button id="hover-button">Hover me</igc-button>

    Usage

    Tooltip target

    원하는 요소에 툴팁을 첨부하려면 의anchor 속성을 사용하고IgcTooltipComponent 대상 요소의 ID로 설정하세요.

    <igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button">
  Congrats you've hovered the button!
</igc-tooltip>

    element 인스턴스를 직접 전달하여 대상을 지정할 수도 있습니다.

    <igc-tooltip id="tooltip">
  Congrats you've hovered the button!
</igc-tooltip>
<igc-button id="hover-button">Hover me</igc-button>

    constructor() {
  const anchor = document.querySelector('#hover-button') as IgcButtonComponent;
  const tooltip = document.querySelector('#tooltip') as IgcTooltipComponent;
  tooltip.anchor = anchor;
}

    Tooltip content

    툴팁 내용은 오프닝과 클로징 태그IgcTooltipComponent 사이에 맞춤 콘텐츠를 배치하여 정의됩니다.

    <igc-tooltip>
  This is my custom content here.
</igc-tooltip>

    또는 단순 텍스트를 설정하려면 이message 속성을 사용할 수 있습니다.

    <igc-tooltip message="This is my custom content here."></igc-tooltip>

    두 가지 접근법(슬롯 콘텐츠와 속성)message을 모두 사용하면 슬롯 콘텐츠가 우선권을 가지고 값은message 무시됩니다.

    <igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</igc-tooltip>

    이 예시에서는 재산 가치 대신message 슬롯 콘텐츠("I will be shown!")가 표시됩니다.

    내용이IgcTooltipComponent 단순한 텍스트 이상일 수 있습니다. 마크IgcTooltipComponent 업에서 평범한 요소이기 때문에, 필요한 요소를 추가하고 스타일링하여 내용을 향상시킬 수 있습니다.

    Show/Hide delay settings

    그리고 보여주기 전에 지연을 조절하고 싶IgcTooltipComponent 다면, andshowDelay 속성을hideDelay 사용할 수 있습니다. 두 속성 모두 밀리초 단위의 시간을 나타내는 숫자 값을 받아들입니다.

    <igc-tooltip show-delay="600" hide-delay="800">
  Her name is Madelyn James.
</igc-tooltip>

    [!NOTE] It's important to note that the Tooltip API methods — show, hide, and toggle — DO NOT take the showDelay and hideDelay properties into account. They act immediately when invoked.

    Placement

    그IgcTooltipComponent 또한 목표 요소에 대해 쉽게 위치를 지정할 수 있습니다. 필요한 것은 다음 기능을 사용하는 것입니다.placement 재산과 함께PopoverPlacement 옵션.

    속성이placement 설정되어 있지 않으면 기본값이 되어 목표Bottom 요소 아래에 위치IgcTooltipComponent 합니다.

    또한, '고정' 기능을 사용할IgcTooltipComponent​sticky 수 있는데, 이 속성은 닫기 버튼을 추가해 사용자가 수동으로 닫을 때까지 보이게 유지IgcTooltipComponent 합니다 (닫기 버튼을 클릭하거나 키를 누르Esc 면 됩니다). 이 동작은 기본 호버 동작을 덮어써, 사용자가 목표 요소 위에 마우스를 멈출 때 이 동작이IgcTooltipComponent 사라지지 않도록 합니다.

    ​IgcTooltipComponent또한 속성에서withArrow 설정할 수 있는 선택적 화살표 표시기도 포함되어 있습니다. 화살표는 툴팁을 앵커 요소와 시각적으로 연결하며, 툴팁placement의 위치에 따라 자동으로 조정됩니다.

    <igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" placement="top-start" sticky with-arrow>
  Congrats you've hovered the button!
</igc-tooltip>

    다음 예시에서는 모든 툴팁 배치 옵션, 화살표 위치 동작, 그리고 속성의sticky 작동 모습을 볼 수 있습니다:

    Triggers

    기본적으로 이 옵션은IgcTooltipComponent 대상 요소 위에 마우스를 올려놓았을 때만 트리거됩니다. 하지만 이 동작은 andshowTriggers 속성을 통해hideTriggers 언제 나타나고 사라지는지 조절IgcTooltipComponent 할 수 있습니다. 이 속성들은 이벤트 이름과 같은click​focus​keypress 값으로 받아들여, 다양한 상황에서 이벤트IgcTooltipComponent를 트리거할 수 있습니다.

    Advanced Example

    이 도구는IgcTooltipComponent 다른 컴포넌트와 원활하게 통합되어, 그 안에 컴포넌트를 포함하는 고급 툴팁을 만들 수 있습니다. 다음 예시에서는 ,그리고 컴포넌트를 사용하여IgcListComponent​IgcAvatarComponent​IgcIconComponent​IgcBadgeComponent​IgcButtonComponent​IgcCardComponent​IgcCategoryChartComponent 설명 툴팁을 만드는 방법을 볼 수 있습니다.

    Additional Properties

    이미 다룬 속성들 외에도, 이 컴포넌트는IgcTooltipComponent 동작, 위치, 외관을 추가로 설정할 수 있는 다양한 추가 속성을 제공합니다.

    이름 유형 설명
    open 부울 툴팁이 표시되는지 여부를 결정합니다.
    withArrow 부울 도구 설명에 대한 화살표 표시기를 렌더링할지 여부를 결정합니다.
    offset 숫자 툴팁과anchor 툴팁 사이의 픽셀 거리를 설정합니다.

    Methods

    설정 가능한 속성 외에도,IgcTooltipComponent 사용할 수 있는 세 가지 메서드도 공개합니다:

    이름 설명
    show 도구 설명이 아직 표시되지 않은 경우 표시합니다. 대상이 제공되면 대상을 과도도로anchor 설정합니다.
    hide 도구 설명이 아직 숨겨져 있지 않은 경우 숨깁니다.
    toggle 도구 설명을 표시된 상태와 숨겨진 상태 사이에서 전환합니다.

    Accessibility & ARIA Support

    ​IgcTooltipComponent접근성을 염두에 두고 구축되었으며 다음과 같은 ARIA 속성을 포함하고 있습니다:

    • role- 툴팁이 기본 동작일 때 적용role="tooltip" 됩니다. 속성이sticky 활성화되어 있으면 역할이 바status 뀝니다.
    • inert- 가시성에 따라 동적으로 토글됩니다. 툴팁이 숨겨지면 무기가 됩니다.
    • aria-atomic- true로 설정하여 툴팁 전체 내용이 변경될 때 공지되도록 보장합니다.
    • aria-live- 정중하게 설정하여 사용자가 대기 중일 때만 업데이트를 공지해야 함을 화면 리더에게 알립니다.

    Styling

    이 컴포넌트는IgcTooltipComponent 스타일링에 사용할 수 있는 두 개의 CSS 부품을 제공합니다:

    이름 설명
    base tooltip 구성 요소의 기본 래퍼입니다.
    top, right, bottom, left ... 도구 설명 화살표가 포함된 영역입니다. 부품 이름은 도구 설명 배치 특성의 값과 일치합니다. 
    igc-tooltip::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-tooltip::part(bottom) {
  border-bottom-color: var(--ig-primary-500);
}

    API References

    Additional Resources