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);

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

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

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

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    Usage

    Tooltip target

    원하는 요소에 툴팁을 첨부하려면 anchor 속성을 <igc-tooltip> 요소. 이 속성은 요소 ID 또는 요소에 대한 직접 참조를 허용합니다. ID 참조를 사용하는 경우 anchor 속성을 대상 요소의 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

    Tooltip 컨텐츠는 <igc-tooltip> element의 여는 태그와 닫는 태그 사이에 사용자 정의 컨텐츠를 배치하여 정의됩니다.

    <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 표시하거나 숨기기 전에 지연을 제어하려면 and hideDelay 속성을 사용할 showDelay 수 있습니다. 두 속성 모두 시간을 밀리초 단위로 나타내는 숫자 값을 허용합니다.

    <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 하기만 하면 됩니다. top​ ​top-start​ ​top-end​ ​bottom​ ​bottom-start​ ​bottom-end​ ​right​ ​right-start​ ​right-end​ ​left​ ​left-start​ ​left-end​

    만약 placement 속성이 설정되지 않은 경우 기본값은 bottom, IgcTooltipComponent 대상 요소 아래.

    또한 닫기 버튼을 IgcTooltipComponent 추가하고 사용자가 닫기 버튼을 클릭하거나 키를 눌러 수동으로 닫을 때까지 계속 표시되는 속성을 사용하여 sticky "고정"을 만들 IgcTooltipComponent 수 있습니다 Esc. 이 동작은 기본 호버 동작을 재정의하여 사용자가 대상 요소 위로 마우스를 올리는 것을 멈출 때 사라지지 않도록 합니다 IgcTooltipComponent.

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

    다음 예제에서는 모든 위치 옵션과 속성이 작동하는 데모를 볼 수 있습니다 sticky.

    Triggers

    기본적으로 는 IgcTooltipComponent 대상 요소 위로 마우스를 가져가는 동안에만 트리거됩니다. 그러나 및 hideTriggers 속성을 사용하여 showTriggers이 동작을 변경할 수 있으며, 이를 통해 가 IgcTooltipComponent 나타나고 사라지는 시기를 제어할 수 있습니다. 이러한 속성은 이벤트 이름을 값(예: click 또는 keypress) focus으로 수락하여 다양한 시나리오에서 트리거 IgcTooltipComponent 할 수 있도록 합니다.

    Advanced Example

    다른 IgcTooltipComponent 구성 요소와 원활하게 통합되므로 구성 요소가 포함된 고급 도구 설명을 만들 수 있습니다. 다음 예제에서는 , IgcAvatarComponent, IgcCardComponent​ ​IgcCategoryChartComponent​ ​IgcIconComponent​ ​IgcButtonComponent​ ​IgcBadgeComponent 및 구성 요소를 사용하여 IgcListComponent 설명이 포함된 도구 설명을 만드는 방법을 볼 수 있습니다.

    Additional Properties

    이미 다룬 속성 외에도 구성 요소는 IgcTooltipComponent 동작, 위치 및 모양을 추가로 구성할 수 있는 다양한 추가 속성을 제공합니다.

    이름 유형 설명
    open 부울 툴팁이 표시되는지 여부를 결정합니다.
    withArrow 부울 로true 설정하면 툴팁의 화살표 표시기를 활성화합니다.
    offset 숫자 툴팁과anchor 툴팁 사이의 픽셀 거리를 설정합니다.

    Methods

    구성 가능한 속성 외에도 사용할 수 있는 세 가지 메서드도 노출합니다. IgcTooltipComponent​

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

    Accessibility & ARIA Support

    접근성 IgcTooltipComponent을 염두에 두고 구축되었으며 다음과 같은 ARIA 속성을 포함합니다.

    • role- 도구 설명이 기본 동작 role="tooltip" 인 경우 가 적용됩니다. sticky 속성이 사용하도록 설정되면 역할이 로 status 변경됩니다.
    • inert- 가시성에 따라 동적으로 전환됩니다. 툴팁이 숨겨지면 비활성화 상태가 됩니다.
    • aria-atomic- true로 설정하면 변경될 때 전체 툴팁 콘텐츠가 발표되도록 합니다.
    • aria-live- polite로 설정하여 사용자가 유휴 상태일 때만 업데이트를 발표해야 함을 화면 읽기 프로그램에 알립니다.

    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