React Tooltip | Infragistics

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

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrAvatar, IgrTooltip } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default class TooltipOverview extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrAvatar id="avatar" shape="circle"
          src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
        ></IgrAvatar>
        <IgrTooltip placement="bottom-start" anchor="avatar">
          Her name is Madelyn James
        </IgrTooltip>
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TooltipOverview />);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-avatar {
  --ig-size: var(--ig-size-medium);
}css

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

시작하기

사용을 IgrTooltipComponent 시작하려면 먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

npm install igniteui-react
cmd

그런 다음 다음과 같이 구성 요소와 필요한 CSS를 IgrTooltipComponent 가져와야 합니다.

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

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

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

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

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

용법

툴팁 대상

원하는 요소에 툴팁을 첨부하려면 anchor 속성을 <IgrTooltip> 요소. 이 속성은 요소 ID 또는 요소에 대한 직접 참조를 허용합니다. ID 참조를 사용하는 경우 anchor 속성을 대상 요소의 ID로 설정합니다.

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

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

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

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

Tooltip 콘텐츠는 <IgrTooltip> element의 여는 태그와 닫는 태그 사이에 사용자 지정 콘텐츠를 배치하여 정의됩니다.

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

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

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

두 가지 접근 방식(슬롯된 콘텐츠와 속성) message을 모두 사용하는 경우 슬롯된 콘텐츠가 우선적으로 적용되고 message 값은 무시됩니다.

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

이 예제에서는 속성 값 대신 message 슬롯이 있는 콘텐츠("I will be shown!")가 표시됩니다.

IgrTooltipComponent 콘텐츠는 단순한 텍스트 이상일 수 있습니다. 는 IgrTooltipComponent 마크업의 일반 요소이므로 필요한 요소를 추가하고 그에 따라 스타일을 지정하여 콘텐츠를 향상시킬 수 있습니다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrAvatar, IgrTooltip, IgrIcon, registerIconFromText } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

const location =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z"/></svg>';

registerIconFromText("location_on", location, "material");

export default class TooltipRich extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className="container sample center">
        <div className="map">
          <IgrIcon
            id="location_icon"
            slot="actions"
            collection="material"
            name="location_on"
          ></IgrIcon>
          <IgrTooltip anchor="location_icon" className="locationTooltip">
            <div className="locationTooltipContent">
              <IgrAvatar
                className="logo"
                src="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"
                shape="square"
              ></IgrAvatar>
              <div>
                <div>Infragistics Inc. HQ</div>
                <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
              </div>
            </div>
          </IgrTooltip>
        </div>
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TooltipRich />);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-icon:hover {
  cursor: pointer;
  color: var(--ig-primary-500);
}

.map {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 272px;
  background-image: url("https://www.infragistics.com/angular-demos-lob/assets/images/card/media/infragisticsMap.png");
  border: 1px solid var(--ig-gray-300);
}

.locationTooltipContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  margin-right: 10px;
  width: 45px;
}

igc-tooltip::part(base) {
  max-width: 240px;
}css

지연 설정 표시/숨기기

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

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

Tooltip API 메서드(show, hide 및 toggle)는 showDelay 및 hideDelay 속성을 고려하지 않는다는 점에 유의해야 합니다. 호출되면 즉시 행동합니다.

배치

또한 IgrTooltipComponent 대상 요소를 기준으로 쉽게 배치할 수 있습니다. 다음 위치 옵션 중 하나와 함께 속성을 사용 placement 하기만 하면 됩니다. top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end

placement 속성이 설정되지 않은 경우 기본값은 "top" 대상 요소 위에 배치됩니다 IgrTooltipComponent.

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

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

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

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrButton, IgrTooltip } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

type PopoverPlacement =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "right"
  | "right-start"
  | "right-end"
  | "left"
  | "left-start"
  | "left-end";

export default class TooltipPlacement extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  Positions = ["top", "bottom", "left", "right"].flatMap((each) => [
    each,
    `${each}-start`,
    `${each}-end`,
  ]) as Array<PopoverPlacement>;

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrButton
          variant="outlined"
          id="tooltip-position"
          style={{ textAlign: "center" }}
        >Click to trigger all supported placements
        </IgrButton>

        {this.Positions.map((pos) => (
          <IgrTooltip
            anchor="tooltip-position"
            show-triggers="click"
            show-delay="0"
            hide-delay="0"
            sticky
            placement={pos}
            key={pos}
          >
            <div>
              <strong>{pos}</strong>
            </div>
          </IgrTooltip>
        ))}
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TooltipPlacement />);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#tooltip-position {
  margin: 40px 0 0 120px;
  width: 400px;
  height: 120px;
}

igc-button::part(base) {
  height: 100%;
  border-radius: 0.5rem;
}css

트리거

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

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { IgrTooltip, IgrButton, IgrInput, IgrCard, IgrCardContent, IgrCardHeader } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default class TooltipTriggers extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <div id="triggers-container">
          <IgrCard>
            <IgrCardHeader>
              <h4 slot="title">Default triggers</h4>
            </IgrCardHeader>
            <IgrCardContent>
              <p>
                Hovering over the button below will display the tooltip using
                its default configuration: it appears on{" "}
                <strong>pointer enter</strong> and hides on{" "}
                <strong>pointer leave</strong> or <strong>click</strong>.
              </p>
              <IgrButton variant="outlined" id="triggers-default">
                Hover over me
              </IgrButton>
              <IgrTooltip anchor="triggers-default">
                I am show on pointer enter and hidden on pointer leave and/or
                click.
              </IgrTooltip>
            </IgrCardContent>
          </IgrCard>

          <IgrCard>
            <IgrCardHeader>
              <h4 slot="title">Focus based</h4>
            </IgrCardHeader>
            <IgrCardContent>
              <p>
                In this instance, the tooltip is bound to show on its anchor
                <strong>focus</strong> and will hide when its anchor is
                <strong>blurred</strong>.
              </p>
              <p>
                Try to navigate with a Tab key to the anchor to see the effect.
              </p>
              <IgrButton variant="outlined" id="triggers-focus-blur">
                Focus me
              </IgrButton>
              <IgrTooltip
                anchor="triggers-focus-blur"
                show-delay="0"
                hide-delay="0"
                show-triggers="focus"
                hide-triggers="blur"
              >
                I am shown on focus and hidden on blur.
              </IgrTooltip>
            </IgrCardContent>
          </IgrCard>

          <IgrCard>
            <IgrCardHeader>
              <h4 slot="title">Same trigger(s) for showing and hiding</h4>
            </IgrCardHeader>
            <IgrCardContent>
              <p>
                The same trigger can be bound to both show and hide the tooltip.
                The button below has its tooltip bound to show/hide on
                <strong>click</strong>.
              </p>
              <IgrButton variant="outlined" id="triggers-click">
                Click
              </IgrButton>
              <IgrTooltip
                show-delay="0"
                hide-delay="0"
                anchor="triggers-click"
                show-triggers="click"
                hide-triggers="click"
              >
                I am show on click and will hide on anchor click.
              </IgrTooltip>
            </IgrCardContent>
          </IgrCard>

          <IgrCard>
            <IgrCardHeader>
              <h4 slot="title">Keyboard interactions</h4>
            </IgrCardHeader>
            <IgrCardContent>
              <p>
                Keyboard interactions are also supported. The button below has
                its tooltip bound to show on a <strong>keypress</strong> and
                hide on a<strong>keypress</strong> or <strong>blur</strong>.
              </p>
              <p>Try it out by focusing the button and pressing a key.</p>
              <IgrButton variant="outlined" id="triggers-keypress">
                Press a key
              </IgrButton>
              <IgrTooltip
                anchor="triggers-keypress"
                show-triggers="keypress"
                hide-triggers="keypress blur"
              >
                I am shown on a keypress and will hide on a keypress or blur.
              </IgrTooltip>
            </IgrCardContent>
          </IgrCard>

          <IgrCard>
            <IgrCardHeader>
              <h4 slot="title">Custom events</h4>
            </IgrCardHeader>
            <IgrCardContent>
              <p>
                The tooltip supports any DOM event, including custom events. Try
                entering a value in the input below, then &quot;commit&quot; it
                by either <strong>blurring</strong> the input or pressing{" "}
                <strong>Enter</strong>.
              </p>
              <IgrInput id="triggers-custom" label="Username"></IgrInput>
              <IgrTooltip anchor="triggers-custom" show-triggers="igcChange">
                Value changed!
              </IgrTooltip>
            </IgrCardContent>
          </IgrCard>
        </div>
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TooltipTriggers />);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#triggers-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  gap: 0.6rem;

  & igc-card {
    max-width: 320px;
  }

  & igc-card-header {
    min-height: 3rem;
  }

  & igc-card-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-between;
  }
}

.sample {
  padding: 0.5rem 0rem 0rem 0.5rem;
}css

추가 속성

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

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

행동 양식

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

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

접근성 및 ARIA 지원

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

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

스타일링

구성 요소는 IgrTooltipComponent 스타일링에 사용할 수 있는 두 개의 CSS 부분을 노출합니다.

이름	설명
`base`	tooltip 구성 요소의 기본 래퍼입니다.
`bottom`	툴팁 화살표가 포함된 영역입니다.

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

import React from "react";
import ReactDOM from "react-dom/client";
import "./Styling.css";
import "./index.css";
import { IgrAvatar, IgrTooltip } from "@infragistics/igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";

export default class TooltipStyling extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  public render(): JSX.Element {
    return (
      <div className="container sample">
        <IgrAvatar id="avatar" shape="circle"
          src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
        ></IgrAvatar>
        <IgrTooltip placement="bottom-start" anchor="avatar">
          Her name is Madelyn James
        </IgrTooltip>
      </div>
    );
  }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TooltipStyling />);

tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-avatar {
  --ig-size: var(--ig-size-medium);
}css

igc-tooltip::part(base) {
  background-color: var(--ig-primary-300);
  color: var(--ig-primary-300-contrast);
}

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

React 툴팁

Ignite UI for React 툴팁 예제