React 툴팁

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

    Ignite UI for React Tooltip Example

    시작하기

    To start using the IgrTooltip, first, you need to install the Ignite UI for React by running the following command:

    npm install igniteui-react

    After that, you need to import the IgrTooltip component and its necessary CSS as follows:

    import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    Now you can start with a basic configuration of the React IgrTooltip.

    <IgrTooltip anchor="hover-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

    Usage

    Tooltip target

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

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

    const anchor = document.querySelector('#hover-button') as IgrButton;
const tooltip = document.querySelector('#tooltip') as IgrTooltip;
tooltip.anchor = anchor;

    <IgrTooltip id="tooltip">
  Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>

    Tooltip content

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

    <IgrTooltip>
  Congrats you have hovered the button!
</IgrTooltip>

    Alternatively, to set simple text, you can use the message property.

    <IgrTooltip message="This is my custom content here."></IgrTooltip>

    If you use both approaches (slotted content and the message property), the slotted content will take priority and the message value will be ignored.

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

    In this example, the slotted content (“I will be shown!”) will be displayed instead of the message property value.

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

    Show/Hide delay settings

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

    <IgrTooltip showDelay="600" hideDelay="800">
  Her name is Madelyn James.
</IgrTooltip>

    [!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

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

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

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

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

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky withArrow={true}>
  Congrats you have hovered the button!
</IgrTooltip>

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

    Triggers

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

    Advanced Example

    이 도구는IgrTooltip 다른 컴포넌트와 원활하게 통합되어, 그 안에 컴포넌트를 포함하는 고급 툴팁을 만들 수 있습니다. 다음 예시에서는 ,그리고 컴포넌트를 사용하여IgrList​IgrAvatar​IgrIcon​IgrBadge​IgrButton​IgrCard​IgrCategoryChart 설명 툴팁을 만드는 방법을 볼 수 있습니다.

    Additional Properties

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

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

    Methods

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

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

    Accessibility & ARIA Support

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

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

    Styling

    이 컴포넌트는IgrTooltip 스타일링에 사용할 수 있는 두 개의 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